JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="perspective">
<div id="container">
<div id="focus">
<div id="p1">
    <div id="a">
    <div class="cube a"></div>
    <div class="cube b"></div>
    <div class="cube c"></div>
    <div class="cube d"></div>
    <div class="cube e"></div>
    <div class="cube f"></div>
    </div>
    <div id="b">
    <div class="cube a"></div>
    <div class="cube b"></div>
    <div class="cube c"></div>
    <div class="cube d"></div>
    <div class="cube e"></div>
    <div class="cube f"></div>
    </div>
    <div id="c">
    <div class="cube a"></div>
    <div class="cube b"></div>
    <div class="cube c"></div>
    <div class="cube d"></div>
    <div class="cube e"></div>
    <div class="cube f"></div>
    </div>
    <div id="d">
    <div class="cube a"></div>
    <div class="cube b"></div>
    <div class="cube c"></div>
    <div class="cube d"></div>
    <div class="cube e"></div>
    <div class="cube f"></div>
    </div>
    <div id="e">
    <div class="cube a"></div>
    <div class="cube b"></div>
    <div class="cube c"></div>
    <div class="cube d"></div>
    <div class="cube e"></div>
    <div class="cube f"></div>
    </div>
    <div id="f">
    <div class="cube a"></div>
    <div class="cube b"></div>
    <div class="cube c"></div>
    <div class="cube d"></div>
    <div class="cube e"></div>
    <div class="cube f"></div>
    </div>
    <div id="g">
    <div class="cube a"></div>
    <div class="cube b"></div>
    <div class="cube c"></div>
    <div class="cube d"></div>
    <div class="cube e"></div>
    <div class="cube f"></div>
    </div>
    <div id="h">
    <div class="cube a"></div>
    <div class="cube b"></div>
    <div class="cube c"></div>
    <div class="cube d"></div>
    <div class="cube e"></div>
    <div class="cube f"></div>
    </div> 
    <div id="i">
    <div class="cube a"></div>
    <div class="cube b"></div>
    <div class="cube c"></div>
    <div class="cube d"></div>
    <div class="cube e"></div>
    <div class="cube f"></div>
   ...

CSS

body {
    overflow:hidden;
}
div {
    position:absolute;
    -webkit-transform-style:preserve-3d;
}
#perspective {
    height:100%; width:100%;
    -webkit-perspective:1000;
}
#container {
    height:100%; width:100%;
    -webkit-transform:translateZ(-9500px);
    -khtml-transition: all 1200ms cubic-bezier(0.85,-0.11,0,0.98);
-webkit-transition: all 1200ms cubic-bezier(0.85,-0.11,0,0.98);
-moz-transition: all 1200ms cubic-bezier(0.85,-0.11,0,0.98);
-o-transition: all 1200ms cubic-bezier(0.85,-0.11,0,0.98);
-ms-transition: all 1200ms cubic-bezier(0.85,-0.11,0,0.98);
transition: all 1200ms cubic-bezier(0.85,-0.11,0,0.98);
}
#container:hover {
    -webkit-transform:translateZ(-1000px);
}
#focus {
    top:00%; right:00%; bottom:00%; left:00%;
    -webkit-animation:spin 10s infinite linear;
}
@-webkit-keyframes spin {
    from {-webkit-transform:rotatey(0);}
    to   {-webkit-transform:rotatey(360deg);}
    }
#p1 {top:-100%; right:-100%; bottom:-100%; left:-100%;    -webkit-transform:translatez(-500px);}
#p2 {top:-100%; right:-100%; bottom:-100%; left:-100%;    -webkit-transform:translatez(000px);}
#p3 {top:-100%; right:-100%; bottom:-100%; left:-100%;    -webkit-transform:translatez(500px);}


#a {top:40%; right:40%; bottom:40%; left:40%;}
#b {top:00%; right:40%; bottom:80%; left:40%;}
#c {top:80%; right:40%; bottom:00%; left:40%;}
#d {top:40%; right:00%; bottom:40%; left:80%;}
#e {top:00%; right:00%; bottom:80%; left:80%;}
#f {top:80%; right:00%; bottom:00%; left:80%;}
#g {top:40%; right:80%; bottom:40%; left:00%;}
#h {top:00%; right:80%; bottom:80%; left:00%;}
#i {top:80%; right:80%; bottom:00%; left:00%;}

.cube { background:rgba(0,0,255,.20); box-shadow:0 0 10px #F00;}
.a {top:00%; right:00; bottom:00; left:00; -webkit-transform:translatez( 100px);}
.b {top:00%; right:00; bottom:00; left:00; -webkit-transform:translatez(-100px);}
.c {top:00%; bottom:00; left:00; width:200px; -webkit-transform:translatex(-100px) rotatey(90deg);}
.d {top:00%; bottom:00; right:00;...