JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<div class="gran_wrap">
<!--   <div class="gvm_sign z-10"></div>
  <div class="gvm_logo_nu z-9"></div> -->
  <div class="gran_head z-8"></div>
  <div class="gran_r_arm_1 z-7"></div>
  <div class="gran_r_arm_2 z-6"></div>
  <div class="gran_torso z-5"></div>
  <div class="gran_l_arm z-4"></div>
  <div class="gran_legs z-3"></div>
</div>

CSS

/* Grandle */

.gran_wrap {
  position: relative;
  min-height: 800px;
  height: auto;
  /* background: #403b4f; */
    background: url(http://greyvoth.com/A24/anim/gran_bg.png) no-repeat;
  overflow: hidden;
  padding: 0;
}

.gran_head {
  width: 287px;
  height: 321px;
  top: 0;
  left: 240px;
  background: url(http://greyvoth.com/A24/anim/gran-anim/gran-head.png) no-repeat;
}

.gran_torso {
  width: 487px;
  height: 608px;
  top: 85px;
  left: 170px;
  background: url(http://greyvoth.com/A24/anim/gran-anim/gran-torso.png) no-repeat;
}

.gran_l_arm {
  width: 700px;
  height: 516px;
  top: 35px;
  left: 20px;
  background: url(http://greyvoth.com/A24/anim/gran-anim/gran-arm-l.png) no-repeat;
}

.gran_r_arm_1 {
  width: 141px;
  height: 284px;
  top: 0;
  left: 0;
  background: url(http://greyvoth.com/A24/anim/gran-anim/gran-arm-r-1.png) no-repeat;
}

.gran_r_arm_2 {
  width: 244px;
  height: 497px;
  top: 0;
  left: 0;
  background: url(http://greyvoth.com/A24/anim/gran-anim/gran-arm-r-2.png) no-repeat;
}

.gran_legs {
  width: 428px;
  height: 89px;
  top: 500px;
  left: 145px;
  background: url(http://greyvoth.com/A24/anim/gran-anim/gran-legs.png) no-repeat;
}

.bg_1 {
  width: 802px;
  height: 802px;
  top: 0;
  left: 0;
  background: url(http://greyvoth.com/A24/anim/gran_bg.png) no-repeat;
}

.gvm_logo_nu {
  width: 563px;
  height: 456px;
  top: 0;
  left: 0;
  background: url(http://greyvoth.com/A24/anim/gvm_logo.png) no-repeat;
}

.gvm_sign {
  width: 486px;
  height: 409px;
  top: 0;
  left: 0;
  background: url(http://greyvoth.com/A24/anim/sign.png) no-repeat;
}

.gran_wrap > div {
  opacity: 1;
  position: absolute;
  scale: 60%;
}

/* Grandle */
.z {
  z-index: -1;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-3 {
  z-index: 3;
}

.z-4 {
  z-index: 4;
}

.z-5 {
  z-index: 5;
}

.z-6 {
  z-index: 6;
}

.z-7 {
  z-index: 7;
}

.z-8 {
  z-index: 8;
}

.z-9 {
  z-index: 9;
}

.z-10 {
  z-index: 10;
}