JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div class="scene">
  <div class="cube-wrap">
     <div class="cube-wrap__inner">
         <div class="cube cube--blue">
             <div class="cube-side cube-side--top"></div>
             <div class="cube-side cube-side-bottom"></div>
             <div class="cube-side cube-side--left"></div>
             <div class="cube-side cube-side--right"></div>
             <div class="cube-side cube-side--front"></div>
             <div class="cube-side cube-side--back"></div>
         </div>
     </div>
    <div class="cube-shadow"></div>
  </div>
</div>

CSS

*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}
.scene {
  margin: 20px;
}
.cube-wrap {
    position: relative;
    width: 58px;
    height: 58px;
    transform-style: preserve-3d;
    transform: translateY(0) rotatex(-33.5deg) rotatey(45deg);
    margin-left: 20px;
    z-index: 1
}

.cube-wrap .cube-wrap__inner {
    transform-style: preserve-3d;
    animation: hoverY 2s infinite alternate;
    animation-timing-function: ease-in-out;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0)
}

.cube {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
    animation: flipY 5.2s infinite;
    backface-visibility: hidden;
    display: inline-block
}

.cube .cube-side {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #13191E;
    line-height: 100px;
    border: 2px solid #0099AE;
    border-image: linear-gradient(to top, #EF4C45, #EE4D7A) 1 3%;
    transform: translate3d(0, 0, 0);
    transform-style: preserve-3d;
    backface-visibility: hidden
}

.cube .cube-side.cube-side--front {
    transform: translate3d(0, 0, 20px);
    border-right-width: 5px;
    border-bottom-width: 5px;
    animation: border-front 5.2s infinite;
    animation-fill-mode: forwards
}

.cube .cube-side.cube-side--back {
    transform: rotateY(180deg) translate3d(0, 0, 20px);
    animation: border-back 5.2s infinite;
    animation-fill-mode: forwards
}

.cube .cube-side.cube-side--top {
    transform: rotatex(90deg) translate3d(0, 0, 20px);
    border-top-width: 5px;
    border-right-width: 5px;
    animation: border-top 5.2s infinite;
    animation-fill-mode: forwards;
    border-left-color: #00B29A;
    border-image: none;
    border-color: #EF4C45
}

@media (min-width: 768px) {
    .cube .cube-side.cube-side--top {
        transform:rotatex(90deg) translate3d(0, 0, 20px) scale(1.02);
        border-radius: 2px
    }
}

.cube...