JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="stage">
    <div class="cube">
      <div class="face front">front</div>
      <div class="face back">back</div>
      <div class="face left">left</div>
      <div class="face right">right</div>
      <div class="face top">top</div>
      <div class="face bottom">bottom</div>
    </div>
  </div>
</div>

CSS

/* Common properties for all faces:  position absolute and size */
.face {
  position: absolute;
  width: var(--S);
  height: var(--S);
}

.cube {
  transform-style: preserve-3d;
  /* transform-origin: center center; */
  width: var(--S);
  height: var(--S);
}

.stage {
  transform: translateZ(calc(var(--S) / -2));
  transform-style: preserve-3d;
}

.container {
  /* Set the size of the sides of the cube here */
  --S: 400px;
  outline: solid 1px red;
  width: var(--S);
  height: var(--S);
  margin: 50px auto 0 auto;
  /* Set perspective */
  perspective: 800px;
/* 
  background-color: rgba(0, 0, 0, 0.2);
  overflow: hidden;
*/
}

.face.front { transform: translateZ(calc(var(--S) / 2)); }
.face.back { transform: rotateY(180deg) translateZ(calc(var(--S) / 2)); }
.face.left { transform: rotateY(-90deg) translateZ(calc(var(--S) / 2)); }
.face.right { transform: rotateY(90deg) translateZ(calc(var(--S) / 2)); }
.face.top { transform: rotateX(90deg) translateZ(calc(var(--S) / 2)); }
.face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--S) / 2)); }

/* Colors and text position */
.face { line-height: var(--S); text-align: center; color: transparent; font-size: calc(var(--S) / 4); }
/* 
.front { background-color: rgba(255, 0, 0, 0.5); }
.back { background-color: rgba(0, 255,  0, 0.5); }
.left { background-color: rgba(0, 0, 255, 0.5); }
.right { background-color: rgba(0, 255, 255, 0.5); }
.top { background-color: rgba(255, 0, 255, 0.5); }
.bottom { background-color: rgba(255, 255, 0, 0.5); }
*/

/* Some more spice: */
.face.front { background-image: url('https://www.mobzystems.com/images/mobzystems/MOBZync/mobzync.png'); }
.face.back { background-image: url('https://www.mobzystems.com/images/mobzystems/MOBZRuler/MOBZRuler.png'); }
.face.left { background-image: url('https://www.mobzystems.com/images/mobzystems/MOBZPing/MOBZPing.png'); }
.face.right { background-image: url('https://www.mobzystems.com/images/mobzystems/QuickCode/QuickCode2008.png'); }
.face.top {...