JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="nikegame-character nikegame-player-2 nikegame-character-running">
  <div class="nikegame-character-head"></div>
  <div class="nikegame-character-arm-left">
        <div class="nikegame-character-arm-upper">
        </div>
        <div class="nikegame-character-arm-lower">
          <div class="nikegame-character-forearm">
          </div>
          <div class="nikegame-character-hand">
          </div>
        </div>
      </div>
      <div class="nikegame-character-arm-right">
        <div class="nikegame-character-arm-upper">
        </div>
        <div class="nikegame-character-arm-lower">
          <div class="nikegame-character-forearm">
          </div>
          <div class="nikegame-character-hand">
          </div>
        </div>
      </div>
  <div class="nikegame-character-torso">  
  </div>
  <div class="nikegame-character-pelvis"></div>
  <!-- left leg -->
  <div class="nikegame-character-leg-left">
    <div class="nikegame-character-leg-upper"></div>
    <div class="nikegame-character-leg-lower">
      <div class="nikegame-character-leg-calf"></div>
      <div class="nikegame-character-leg-foot"></div>
    </div>
  </div>
  <!-- right leg -->
  <div class="nikegame-character-leg-right">
    <div class="nikegame-character-leg-upper"></div>
    <div class="nikegame-character-leg-lower">
      <div class="nikegame-character-leg-calf"></div>
      <div class="nikegame-character-leg-foot"></div>
    </div>
  </div>
</div>

CSS

html,body{
  height:100%;
  perspective:500px;
  background-color:#666;
}

.nikegame-character{
  transform-style:preserve-3d;
  position:absolute;
  left:50%;
  margin-left:0px;
  width:0px;
  height:auto;
  margin-top:0px;
  top:50%;
  transform: rotateY(30deg);
  transition:all .7s;
}
.nikegame-character.nikegame-character-running{
  animation-name:nikegamecharacterrunning;
  animation-duration: .3s;
  animation-iteration-count: infinite;
  animation-timing-function:linear;
}
@keyframes nikegamecharacterrunning{
  0% { margin-top: 0px; }
  50% { margin-top: -20px; }
  100% { margin-top: 0px; }
}
.nikegame-character.nikegame-character-walking{
  animation-name:nikegamecharacterwalking;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-timing-function:linear;
}
@keyframes nikegamecharacterwalking{
  0% { margin-top: 0px; }
  50% { margin-top: -10px; }
  100% { margin-top: 0px; }
}
.nikegame-character .nikegame-character-head{
  width:80px;
  height:120px;
  position:absolute;
  top:-202px;
  left:-38px;
}
.nikegame-character.nikegame-player-1 .nikegame-character-head{
  background-image: url(https://aninoob.com/games/vr/editor/texture.library/Demos/NikeGame/player-head.png);
}
.nikegame-character.nikegame-player-2 .nikegame-character-head{
  background-image: url(https://aninoob.com/games/vr/editor/texture.library/Demos/NikeGame/player2-head.png?1);
}
.nikegame-character.nikegame-player-3 .nikegame-character-head{
  background-image: url(https://aninoob.com/games/vr/editor/texture.library/Demos/NikeGame/player3-head.png);
}
.nikegame-character .nikegame-character-pelvis{
  width:60px;
  height:20px;
  background-image: url(https://aninoob.com/games/vr/editor/texture.library/Demos/NikeGame/player-pelvis.png);
  position:absolute;
  top:-20px;
  left:-30px;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
}
.nikegame-character .nikegame-character-torso{
  transform-style:preserve-3d;
  width:54px;
  height:70px;
 ...