JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div id="cube">
    <div class="figure front"></div>
    <div class="figure back"></div>
    <div class="figure right"></div>
    <div class="figure left"></div>
    <div class="figure top"></div>
    <div class="figure bottom"></div>
  </div>
</div>

CSS

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

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translateZ( -100px);
  -webkit-animation: spinCubeWebkit 9s infinite linear;
}

#cube .figure {
  width: 196px;
  height: 196px;
  display: block;
  background: black;
  position: absolute;
  border: 2px solid black;
  opacity: 0.6;
}

#cube .front {
  -webkit-transform: rotateY( 0deg) translateZ( 100px);
  background: red;
}

#cube .back {
  -webkit-transform: rotateX( 180deg) translateZ( 100px);
  background: blue;
}

#cube .right {
  -webkit-transform: rotateY( 90deg) translateZ( 100px);
  background: green;
}

#cube .left {
  -webkit-transform: rotateY( -90deg) translateZ( 100px);
  background: yellow;
}

#cube .top {
  -webkit-transform: rotateX( 90deg) translateZ( 100px);
  background: white;
}

#cube .bottom {
  -webkit-transform: rotateX( -90deg) translateZ( 100px);
  background: orange;
}

@-webkit-keyframes spinCubeWebkit {
  0% {
    -webkit-transform: translateZ( -100px) rotateX( 0deg) rotateY( 0deg);
  }
  100% {
    -webkit-transform: translateZ( -100px) rotateX( 360deg) rotateY( 360deg);
  }
}