JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="fuelband">
    <div class="fuelband-ring1"></div>
    <div class="fuelband-ring2"></div>
    <div class="fuelband-ring3"></div>
    <div class="fuelband-ring4"></div>
    <div class="fuelband-ring5"></div>
    <div class="fuelband-ring6"></div>
    <div class="fuelband-ring7"></div>
    <div class="fuelband-ring8"></div>
    <div class="fuelband-ring9"></div>
    <div class="fuelband-ring10"></div>
    <div class="fuelband-ring11"></div>
    <div class="fuelband-ring12"></div>
    <div class="fuelband-ring13"></div>
    <div class="fuelband-ring14"></div>
    <div class="fuelband-ring15"></div>
    <div class="fuelband-front-top"></div>
    <div class="fuelband-front-center"></div>
    <div class="fuelband-front-bottom"></div>
    <div class="fuelband-strap"></div>
    <div class="fuelband-logo"></div>
</div>

CSS

html{
  height:100%;
}
body{
  height:100%;
  margin:0px;
  perspective:500px;
  
}
@keyframes spin{
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
.fuelband{
  transform-origin:50% 50%;
  transform-style:preserve-3d;
  position:absolute;
  top:50%;
  left:50%;
  width:0px;
  height:0px;
  animation:spin infinite 3s linear;
}
.fuelband>div{
  position:absolute;
  width:220px;
  height:300px;
  top:-150px;
  left:-110px;
  transform-origin:50% 50%;
  background-image:url(https://aninoob.com/games/vr/editor/texture.library/Demos/NikeGame/fuelband.ring.png);
}
.fuelband .fuelband-ring1{
  transform:translateZ(-35px);
}
.fuelband .fuelband-ring2{
  transform:translateZ(-30px);
}
.fuelband .fuelband-ring3{
  transform:translateZ(-25px);
}
.fuelband .fuelband-ring4{
  transform:translateZ(-20px);
}
.fuelband .fuelband-ring5{
  transform:translateZ(-15px);
}
.fuelband .fuelband-ring6{
  transform:translateZ(-10px);
}
.fuelband .fuelband-ring7{
  transform:translateZ(-5px);
}
.fuelband .fuelband-ring8{
  transform:translateZ(0px);
}
.fuelband .fuelband-ring9{
  transform:translateZ(5px);
}
.fuelband .fuelband-ring10{
  transform:translateZ(10px);
}
.fuelband .fuelband-ring11{
  transform:translateZ(15px);
}
.fuelband .fuelband-ring12{
  transform:translateZ(20px);
}
.fuelband .fuelband-ring13{
  transform:translateZ(25px);
}
.fuelband .fuelband-ring14{
  transform:translateZ(30px);
}
.fuelband .fuelband-ring15{
  transform:translateZ(35px);
}
.fuelband>.fuelband-front-center{
  width: 70px;
  height:80px;
  top: -40px;
  left:-35px;
  background-image:url(https://aninoob.com/games/vr/editor/texture.library/Demos/NikeGame/fuelband.front.png?2);
  background-position:center center;
  transform:translateX(-110px) rotateY(-90deg);
  backface-visibility:hidden;
}
.fuelband>.fuelband-front-top{
  width: 70px;
  height:60px;
  top: -97px;
  left:-35px;
 ...