JSFiddle - React, Tailwind, and code Playground

by mkzero

HTML

<div id="logos">
  <a id="cube" href="javascript:void(0);">
    <div id="one-1"></div>
    <div id="two-1"></div>
    <div id="three-1"></div>
    <div id="four-1"></div>
    <div id="five-1"></div>
    <div id="six-1"></div>
  </a>
  <a id="cube2" href="javascript:void(0);">
    <div id="one-2"></div>
    <div id="two-2"></div>
    <div id="three-2"></div>
    <div id="four-2"></div>
    <div id="five-2"></div>
    <div id="six-2"></div>
  </a>
  <a id="cube3" href="javascript:void(0);">
    <div id="one-3"></div>
    <div id="two-3"></div>
    <div id="three-3"></div>
    <div id="four-3"></div>
    <div id="five-3"></div>
    <div id="six-3"></div>
  </a>
  <a id="cube4" href="javascript:void(0);">
    <div id="one-4"></div>
    <div id="two-4"></div>
    <div id="three-4"></div>
    <div id="four-4"></div>
    <div id="five-4"></div>
    <div id="six-4"></div>
  </a>
  <a id="cube5" href="javascript:void(0);">
    <div id="one-5"></div>
    <div id="two-5"></div>
    <div id="three-5"></div>
    <div id="four-5"></div>
    <div id="five-5"></div>
    <div id="six-5"></div>
  </a>
  <a id="cube6" href="javascript:void(0);">
    <div id="one-6"></div>
    <div id="two-6"></div>
    <div id="three-6"></div>
    <div id="four-6"></div>
    <div id="five-6"></div>
    <div id="six-6"></div>
  </a>
</div>

CSS

#logos {
  position:absolute;  
    top: 100px;  
    left: 150px; 
   width: 300px;
   height: 700px;
  -webkit-transform-style: preserve-3d;
   -webkit-transform:     translate3d(100px,100px,100px);
   -webkit-perspective: 700px;
}
#cube,#cube2,#cube3,#cube4,#cube5,#cube6 {
  display: block;  position: absolute;  margin: 60px auto;
  height: 100px;  width: 100px;
  -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
    -webkit-transform-style: preserve-3d;
}
#cube2 {
  height: 200px;  width: 200px;
}
#cube3 {
  height: 300px;  width: 300px;
}
#cube4 {
  height: 400px;  width: 400px;
}
#cube5 {
  height: 500px;  width: 500px;
}
#cube6 {
  height: 600px;  width: 600px;
}
#one-1, #two-1, #three-1, #four-1, #five-1, #six-1,
#one-2, #two-2, #three-2, #four-2, #five-2, #six-2,
#one-3, #two-3, #three-3, #four-3, #five-3, #six-3,
#one-4, #two-4, #three-4, #four-4, #five-4, #six-4,
#one-5, #two-5, #three-5, #four-5, #five-5, #six-5,
#one-6, #two-6, #three-6, #four-6, #five-6, #six-6{
  width: 100px;
  height: 100px;
  position: absolute;
  background: rgba(0,0,0,0.5);
  font-size:100px;
  text-align: center;
  -webkit-transition: 1s;
  -webkit-transform-style: preserve-3d;
}

#six-1,
#six-2,
#six-3,
#six-4,
#six-5,
#six-6 {
  -webkit-transform: translate3d(0,0,0);
  background: rgba(100,0,0,0.5);
}
#five-1,
#five-2,
#five-3,
#five-4,
#five-5,
#five-6 {
  -webkit-transform: translate3d(0,100px,0);
  background: rgba(0,100,0,0.5);
}
#four-1,
#four-2,
#four-3,
#four-4,
#four-5,
#four-6 {
  -webkit-transform: translate3d(0,200px,0);
  background: rgba(0,0,100,0.5);
}
#three-1,
#three-2,
#three-3,
#three-4,
#three-5,
#three-6 {
  -webkit-transform: translate3d(0,300px,0);
  background: rgba(100,100,0,0.5);
}
#two-1,
#two-2,
#two-3,
#two-4,
#two-5,
#two-6 {
  -webkit-transform: translate3d(-100px,100px,0);
  -webkit-transition: 1s;
  background: rgba(100,0,100,0.5);
}
#one-1,
#one-2,
#one-3,
#one-4,
#one-5,
#one-6 {
  -webkit-transform: translate3d(100px,100px,0);
 ...