JSFiddle - React, Tailwind, and code Playground

by yura2405

HTML

html
body
  .human
    .head
    .body
    .arm.left
      .limb.upper
      .limb.lower
    .arm.right
      .limb.upper
      .limb.lower
    .leg.left
      .limb.upper
      .limb.lower
        .limb.foot
    .leg.right
      .limb.upper
      .limb.lower
        .limb.foot
    .limb.easterEgg

CSS

@keyframes rotateBody {
  0% {
    transform: rotate(-35deg);
  }
  50% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(-35deg);
  }
}

@keyframes headBop {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-1px) translateX(-2px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-1px) translateX(-2px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes bodyBop {
  0% {
    transform: translateY(0) rotate(7deg);
  }
  25% {
    transform: translateY(-12px) rotate(0deg);
  }
  50% {
    transform: translateY(0) rotate(7deg);
  }
  75% {
    transform: translateY(-12px) rotate(0deg);
  }
  100% {
    transform: translateY(0) rotate(7deg);
  }
}

@keyframes rotateLeg {
  0% {
    transform: rotate(-40deg);
  }
  50% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(-40deg);
  }
} 

@keyframes rotateLowerLeg {
  0% {
    transform: rotate(5deg);
  }
  25% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(40deg);
  }
  75% {
    transform: rotate(60deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

@keyframes rotateFoot {
  0% {
    transform: rotate(-100deg);
  }
  50% {
    transform: rotate(-40deg);
  }
  75% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-100deg);
  }
}

@keyframes rotateArm {
  0% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(15deg);
  }
}

@keyframes rotateLowerArm {
  50% {
    transform: rotate(-30deg);
  }
}

@keyframes easterEgg {
  0% {
    transform: rotate(-80deg);
  }
  25% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(-80deg);
  }
  75% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(-80deg);
  }
}

html {
  height: 100%;
}

body {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.human {
  position: relative;
  animation: bodyBop 1s infinite;
}

.head {
 ...