JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="container">
<span id="lt">    
    <div class='boxLeft'>  
    </div>
    <div class='boxTop'>  
    </div>
    <div class='boxFront'>
    </div>
</span>    
<span id="rt">    
        <div class='boxLeft'>  
        </div>
        <div class='boxTop'>  
        </div>
        <div class='boxFront'>
        </div>
    </span>
</div>

CSS

*{
    /*transition*/
    -webkit-transition:All 0.5s ease;
       -moz-transition:All 0.5s ease;
         -o-transition:All 0.5s ease;
            transition:All 0.5s ease;
}
html{
    background-color:#666666;
}
#container{
    width:600px;
    height:300px;
    margin:auto;
    margin-top:150px;
}
#lt{width:300px;float:left;display:block;}
#rt{width:300px;float:right;display:block;}

.boxLeft{
    position:absolute;
    /*transform*/
    -webkit-transform:skew(0deg, 30deg);
       -moz-transform:skew(0deg, 30deg);
        -ms-transform:skew(0deg, 30deg);
         -o-transform:skew(0deg, 30deg);
            transform:skew(0deg, 30deg);
    background-color:#ccc;
    height:100px;
    width:100px;
    display:block;
    z-index:4;
}
.boxTop{
    position:absolute;
    background-color:#eee;
    height:58px;
    width:90px;
    display:block;
    margin-top:-56px;
    margin-left:51px;
    /*transform*/
    -webkit-transform:skew(60deg, -30deg);
       -moz-transform:skew(60deg, -30deg);
        -ms-transform:skew(60deg, -30deg);
         -o-transform:skew(60deg, -30deg);
            transform:skew(60deg, -30deg);
    z-index:3;
}
.boxFront{
    position:absolute;
    background-color:#ddd;
    height:100px;
    width:90px;
    display:block;
    margin-top:4px;
    margin-left:101px;
    /*transform*/
    -webkit-transform:skew(0deg, -30deg);
       -moz-transform:skew(0deg, -30deg);
        -ms-transform:skew(0deg, -30deg);
         -o-transform:skew(0deg, -30deg);
            transform:skew(0deg, -30deg);
    z-index:4;
}
.boxLeft:hover{
    position:absolute;
    /*transform*/
    -webkit-transform:skew(0deg, 30deg) translate(-10px);
       -moz-transform:skew(0deg, 30deg) translate(-10px);
        -ms-transform:skew(0deg, 30deg) translate(-10px);
         -o-transform:skew(0deg, 30deg) translate(-10px);
            transform:skew(0deg, 30deg) translate(-10px);
    margin-top:10px;
    background-color:#ccc;
    height:100px;
    width:100px;
   ...