JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="wrapper">
  <div class="cube one"></div>
  <div class="cube two"></div>
  <div class="cube three"></div>
  <div class="cube four"></div>
  <div class="cube five"></div>
  <div class="cube six"></div>
  <div class="cube seven"></div>
  <div class="cube eight"></div>
  <div class="cube nine"></div>
  <div class="cube ten"></div>
  <div class="cube eleven"></div>
</div>

SCSS

$color: cyan;

HTML,
BODY {
  min-height: 100%;
  height: 100%;
}

.wrapper {
  position: relative;
  background: darken($color,47);
  height: 100%;
  
  &:hover {
    
    .cube {
      //border-radius: 0px;
    
      &.one {
        transform: translate(-50%,-50%) rotateX(-45deg) rotateZ(45deg) translateZ(-25px);
        //background: lighten($color,50);
      }
      &.two {
        transform: translate(-50%,-50%) rotateX(-45deg) rotateZ(45deg) translateZ(-20px);
        //background: lighten($color,45);
      }
      &.three {
        transform: translate(-50%,-50%) rotateX(-45deg) rotateZ(45deg) translateZ(-15px);
        //background: lighten($color,40);
      }
      &.four {
        transform: translate(-50%,-50%) rotateX(-45deg) rotateZ(45deg) translateZ(-10px);
        //background: lighten($color,35);
      }
      &.five {
        transform: translate(-50%,-50%) rotateX(-45deg) rotateZ(45deg) translateZ(-5px);
        //background: lighten($color,30);
      }
      &.six {
        transform: translate(-50%,-50%) rotateX(-45deg) rotateZ(45deg) translateZ(0px);
        background: lighten($color,25);
      }
      &.seven {
        transform: translate(-50%,-50%) rotateX(-45deg) rotateZ(45deg) translateZ(5px);
        //background: lighten($color,20);
      }
      &.eight {
        transform: translate(-50%,-50%) rotateX(-45deg) rotateZ(45deg) translateZ(10px);
        //background: lighten($color,15);
      }
      &.nine {
        transform: translate(-50%,-50%) rotateX(-45deg) rotateZ(45deg) translateZ(15px);
        //background: lighten($color,10);
      }
      &.ten {
        transform: translate(-50%,-50%) rotateX(-45deg) rotateZ(45deg) translateZ(20px);
        //background: lighten($color,5);
      }
      &.eleven {
        transform: translate(-50%,-50%) rotateX(-45deg) rotateZ(45deg) translateZ(25px);
        //background: $color;
      }
      
    }
    
  }
}

.cube {
  width: 100px;
  height: 100px;
  background: red;
  position:...