JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cube">
        <div class="face font">
            front face
        </div>
        <div class="face back">
            front face
        </div>
    </div>

CSS

/*#experiment {
      -webkit-perspective: 800;
      -webkit-perspective-origin: 50% 150px;

      -moz-perspective: 800;
      -moz-perspective-origin: 50% 150px;
    }*/

    .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;
      background-color: red;
      font-size: 27px;
      line-height: 1em;
      color: #fff;
      border: 1px solid #555;
      border-radius: 3px;
    }

    .cube .one  {
      -webkit-transform: rotateX(90deg) translateZ(150px);
      -moz-transform: rotateX(90deg) translateZ(150px);
    }

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

    .cube .three {
      -webkit-transform: rotateY(90deg) translateZ(150px);
      -moz-transform: rotateY(90deg) translateZ(150px);
    }

    .cube .four {
      -webkit-transform: rotateY(180deg) translateZ(150px);
      -moz-transform: rotateY(180deg) translateZ(150px);
    }

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

    .cube .six {
      -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(150px);
      -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(150px);
    }
.cube:hover{
   transform:rotateY(90deg); 
   
}