JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cube">
    <div class="cubespinner"> 
        <div class="face">1</div> 
        <div class="face">2</div> 
        <div class="face">3</div> 
        <div class="face">4</div> 
        <div class="face">5</div> 
        <div class="face">6</div> 
    </div>

CSS

<style>
.cube {margin: 0 auto; position: relative; width: 800px;}
 
.cubespinner  {
    animation: spincube 10s infinite;
    transform-style: preserve-3d;
    transform-origin: center center;
    margin: 15px auto;
    height: 24px; width: 24px;
    position: absolute;
}
 
.face {
    background: rgba(255,255,255,0.5);
    border: 1px solid #bababa;
    box-shadow: inset 0 0 5px #8ecbde, 0 0 2px #fff;
    color: #55dede;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    position: absolute;
    text-align: center;
    width: 24px;
}
 
.face img {padding: 1px;}
.face:nth-child(1) {transform: translateZ(12px);}
.face:nth-child(2) {transform: rotateY(90deg) translateZ(12px);}
.face:nth-child(3) {transform: rotateY(90deg) rotateX(90deg) translateZ(12px);}
.face:nth-child(4) {transform: rotateY(180deg) rotateZ(90deg) translateZ(12px);}
.face:nth-child(5) {transform: rotateY(-90deg) rotateZ(90deg) translateZ(12px);}
.face:nth-child(6) {transform: rotateX(-90deg) translateZ(12px);}
 
@-webkit-keyframes spincube {
from,to {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
16% {transform: rotateY(90deg);}
33% {transform: rotateY(90deg) rotateZ(-90deg);}
50% {transform: rotateY(-180deg) rotateZ(90deg);}
66% {transform: rotateY(-270deg) rotateX(90deg);}
83% {transform: rotateX(90deg);}
}
 
@keyframes spincube {
from,to {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
16% {transform: rotateY(90deg);}
33% {transform: rotateY(90deg) rotateZ(-90deg);}
50% {transform: rotateY(180deg) rotateZ(-90deg);}
66% {transform: rotateY(270deg) rotateX(-90deg);}
83% {transform: rotateX(-90deg);}
}
</style>