JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="stage">

  <figure class="player">
    <div class="player-helmet"><div class="player-head"><div class="player-face"></div></div></div>
    <div class="player-torso">
      <div class="player-ab"></div>
      <div class="player-left-arm">
        <div class="player-left-arm-upper">
          <div class="player-left-arm-fore">
            <div class="player-left-arm-hand"></div>
          </div>
        </div>
      </div>
      <div class="player-right-arm">
        <div class="player-right-arm-upper">
          <div class="player-right-arm-fore">
            <div class="player-right-arm-hand"></div>
          </div>
        </div>
      </div>
    </div>
  </figure>
  
</div>

CSS

html{
  height:100%;
}
body{
  height:100%;
  margin:0px;
  background-color:#000;
  perspective:200px;
}
.stage{
  transform-style:preserve-3d;
  top:50%;
  left:50%;
  position:absolute;
  height:0px;
  width:0px;
  transform: rotateY(30deg);
  /*
  animation: spin infinite 10s  linear;
  */
}
@keyframes spin{
  0%{ transform: rotateY(0deg) rotateX(-20deg); }
  100%{ transform: rotateY(360deg) rotateX(-20deg); }
}
.player{
  transform-style:preserve-3d;
  top:50%;
  left:50%;
  position:absolute;
  height:0px;
  width:0px;
  backface-visibility:hidden;
}
.player>.player-torso{
  transform-style:preserve-3d;
  top:50%;
  left:50%;
  position:absolute;
  height:0px;
  width:0px;
  backface-visibility:hidden;
}
.player>.player-torso>.player-ab{
  transform-style:preserve-3d;
  width:40px;
  height:100px;
  background-color:#ccc;
  position:absolute;
  backface-visibility:hidden;
}
.player>.player-torso>.player-ab:before{
  content:"";
  display:block;
  transform-style:preserve-3d;
  width:30px;
  height:100px;
  transform-origin: 100% 50%;
  transform:translateX(-30px) rotateY(-60deg);
  background-color:#ddd;
  position:absolute;
  backface-visibility:hidden;
}
.player>.player-torso>.player-ab:after{
  content:"";
  display:block;
  transform-style:preserve-3d; 
  width:30px;
  height:100px;
  transform-origin: 0% 50%;
  transform:translateX(40px) rotateY(60deg);
  background-color:#ddd;
  position:absolute;
  backface-visibility:hidden;
}
.player>.player-torso>.player-left-arm{
  transform-style:preserve-3d;
  width:0px;
  height:0px;
  position:absolute;
  transform:translateX(10px) translateZ(20px);
  backface-visibility:hidden;
}
.player>.player-torso>.player-left-arm>.player-left-arm-upper{
  transform-style:preserve-3d;
  width:10px;
  height:50px;
  background-color:#666;
  position:absolute;
  transform-origin:50% 0%;
  backface-visibility:hidden;
}
.player>.player-torso>.player-left-arm>.player-left-arm-upper:before{
  content:"";
  display:block;
 ...