JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="back side"></div>
    <div class="left side"></div>
    <div class="right side"></div>
    <div class="top side"></div>
    <div class="bottom side"></div>
    <div class="front side"></div>
</div>

CSS

BODY {
  padding-top:50px;
  perspective: 500px;
  perspective-origin: center center;
  }

.container {
  width: 10em;
  height: 10em;
  border: 2px dotted white;
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
  }
.container:before,
.container:after {
  content: "";
  display: block;
  position: absolute;
  width: 10em;
  height: 10em;
  border: 2px dotted white;
  }
  .container:before {
    transform: rotateX(90deg);  
    }
  .container:after {
    transform: rotatey(90deg);  
    }

.side {
  position: absolute;
  width: 10em;
  height: 10em;
  border: 1px solid white;
  opacity: .7;
  }

.back {
  transform: translateZ(-5em);
  background: orange;
  }
.front {
  transform: translateZ(5em);
  background: gold;
  }
.top {
  transform: translateY(-5em) rotateX(90deg);
  background: skyblue;
  }
.bottom {
  transform: translateY(5em) rotateX(90deg);
  background: steelblue;
  }
.left {
  transform: translateX(-5em) rotateY(90deg);
  background: lightgreen;
  }

.right {
  transform: translateX(5em) rotateY(90deg);
  background: yellowgreen;
  }

@keyframes rotate {
  100% {
    transform: rotateY(360deg);
  }
}

// Helpers

HTML, BODY {
    height: 100%;
}

BODY {
  display: flex;
  justify-content: center;
  align-items: center;
}