JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cube" style="width: 4em; height: 8em;">
  <div style="transform: translate3d(0em, 0em, 2em)">A</div>
  <div style="transform: translate3d(4em, 0em, 2em)">B</div>
  <div style="transform: translate3d(0em, 4em, 2em)">C</div>
  <div style="transform: translate3d(4em, 4em, 2em)">D</div>
  <div style="transform: translate3d(0em, 0em, -2em)">E</div>
  <div style="transform: translate3d(4em, 0em, -2em)">F</div>
  <div style="transform: translate3d(0em, 4em, -2em)">G</div>
  <div style="transform: translate3d(4em, 4em, -2em)">H</div>
</div>

CSS

#cube {
  position: relative;
  transform-style: preserve-3d;
  animation: spin 20s linear infinite;
  
  top: 2em;
  left: 2em;
}

#cube > div {
  position: absolute;
  transform-style: preserve-3d;
}

@keyframes spin {
  from { transform: rotateX(-0.1turn) rotateY(0turn); }
  to { transform: rotateX(-0.1turn) rotateY(1turn); }
}