<div id="app">
  <h1>CSS Cursor Property</h1>
  <div class='cursor-container'>
  <div v-for="cur in cursors" :style='{cursor: cur}'>{{cur}}</div>
</div> 
  </div> 

@import url('https://fonts.googleapis.com/css?family=Baloo|Bree+Serif');
  *
  {
    box-sizing: border-box;
  }

#app
{
  background-color: #2980b9;
  height: 100vh;
  width: 100vw;
  padding: 10px; 
  overflow: auto;
  
  h1
  {
    width: 100%;
    text-align: center;
    margin: 1em 0;
    color: white;
    font-size: 3em;
    font-family: "Baloo";
    text-shadow: 3px 3px 20px #34495e;
  }
  
  .cursor-container
  {
    font-family: "Bree Serif";
    display: grid;
    grid-template-columns: repeat(6, 1fr);
     grid-auto-rows: 100px;
    grid-gap: 15px;
    
    > div
    {
      background-color: #ecf0f1;
      display: flex;
      justify-content: center;
      align-items: center;
      text-transform: uppercase;
      font-size: 1em;
      border-radius: 5px;
      color: #34495e;
      opacity: 0.8;
      transition: all 0.3s;
      
      &:hover
      {
        opacity: 1;
      }
    }
  }
}

new Vue({
  el: "#app",
  data() {
    return {
      cursors: ["auto","default","none","context-menu","help","pointer","progress","wait","cell","crosshair","text","vertical-text","alias","copy","move","no-drop","not-allowed","e-resize","n-resize","ne-resize","nw-resize","s-resize","se-resize","sw-resize","w-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","col-resize","row-resize","all-scroll","zoom-in","zoom-out","grab","grabbing"]
    }
  }
});