JSFiddle - React, Tailwind, and code Playground

HTML

<div id="experiment">
    <div class="cube">
        <div class="face front">
            front face
        </div>
        <div class="face side">
            side face
        </div>
    </div>
</div>

CSS

#experiment {
    -webkit-perspective: 800;
    -webkit-perspective-origin: 50% 200px;
    
    -moz-perspective: 800;
    -moz-perspective-origin: 50% 200px;
}

.cube {
    position: relative;
    margin: 100px auto 0;
    height: 300px;
    width: 300px;
    -webkit-transition: -webkit-transform .5s linear;
    -webkit-transform-style: preserve-3d;
    
    -moz-transition: -moz-transform .5s linear;
    -moz-transform-style: preserve-3d;
}

.face {
    position: absolute;
    height: 300px;
    width: 300px;
    padding: 0px;
    font-size: 27px;
    line-height: 1em;
    color: #fff;
    border: 1px solid #555;
    border-radius: 3px;
}

.cube .front {
    -webkit-transform: translateZ(150px);
    -moz-transform: translateZ(150px);
    background-color:red;
}

.cube .side {
    -webkit-transform: rotateY(-90deg) translateZ(150px);
    -moz-transform: rotateY(-90deg) translateZ(150px);
    background-color:orange;
}

.cube:hover{
    -webkit-transform:rotateY(90deg);     
}