JSFiddle - React, Tailwind, and code Playground

by Web Carvers

HTML

<div class="cube">
    <div class="side1 front"></div>
    <div class="side1 back"></div>
    <div class="side2 right"></div>
    <div class="side2 left"></div>
    <div class="side3 top"></div>
    <div class="side3 left"></div>
</div>

CSS

.cube {
    position:relative;
    float:left;
    width: 62px;
    height: 62px;
    margin-top:100px;
    margin-left:100px;
    transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-origin:50% 50% 50%;
    transition: all 0.5s !important;
    -moz-transition: all 0.5s !important;
    -webkit-transition: all 0.5s !important;
    -ms-transition: all 0.5s !important;
    -o-transition: all 0.5s !important;
    transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    /* Safari and Chrome */
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    -ms-transition-timing-function: ease-in;
    -webkit-transform: rotateY(0deg) rotateX(45deg) rotateZ(20deg);
    -o-transform: rotateY(0deg) rotateX(45deg) rotateZ(20deg);
    -ms-transform: rotateY(0deg) rotateX(45deg) rotateZ(20deg);
    -moz-transform: rotateY(0deg) rotateX(45deg) rotateZ(20deg);
}
.side1, .side2, .side3 {
    position: absolute;
    background: #1660a9;
}
.side1 {
    width:100px;
    height:200px;
}
.side2 {
    width:30px;
    height:200px;
}
.side2 {
    width:100px;
    height:30px;
}

.front {
    -webkit-transform: translateZ(31px);
    -moz-transform: translateZ(31px);
    -o-transform: translateZ(31px);
    -ms-transform: translateZ(31px);
    transform: translateZ(31px);
}
.back {
    -webkit-transform: rotateY(-180deg) translateZ(31px);
    -ms-transform: rotateY(-180deg) translateZ(31px);
    -moz-transform: rotateY(-180deg) translateZ(31px);
    -o-transform: rotateY(-180deg) translateZ(31px);
    transform: rotateY(-180deg) translateZ(31px);
}
.right {
    -webkit-transform: rotateY(90deg) translateZ(31px);
    -ms-transform: rotateY(90deg) translateZ(31px);
    -moz-transform: rotateY(90deg) translateZ(31px);
    -o-transform: rotateY(90deg) translateZ(31px);
    transform:...