JSFiddle - React, Tailwind, and code Playground

HTML

<section class="container">
          <div id="cube">
            <figure class="front">1</figure>
            <figure class="back">2</figure>
            <figure class="right">3</figure>
            <figure class="left">4</figure>
            <figure class="top">5</figure>
            <figure class="bottom">6</figure>
          </div>
        </section>

CSS

.container {
    margin: 200px auto;
    width: 200px;
    height: 200px;
    position: relative;
    -webkit-perspective: 800px;
    }

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
}

#cube figure {
      width: 198px;
      height: 198px;
      display: block;
      position: absolute;
      border: 1px solid #ddd;
      background-color: rgba(0,0,0,0.2);

}

#cube .front { -webkit-transform: rotateY(0deg) translateZ(100px); }
#cube .back { -webkit-transform: rotateX(180deg) translateZ(100px); }
#cube .right { -webkit-transform: rotateY(90deg) translateZ(100px); }
#cube .left { -webkit-transform: rotateY(-90deg) translateZ(100px); }
#cube .top { -webkit-transform: rotateX(90deg) translateZ(100px); }
#cube .bottom { -webkit-transform: rotateX(-90deg) translateZ(100px); }