JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

CSS

/* Grandle */

.gran_wrap {
  position: relative;
  min-height: 1060px;
  height: auto;
  background: #403b4f;
  overflow: hidden;
  padding: 0;
}

.gran_head {
  width: 50px;
  height: 194px;
  top: 608px;
  left: 170px;
  background: url(http://greyvoth.com/A24/anim/gran-anim/gran-head.png) no-repeat;
}

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

.gran_l_arm {
  width: 50px;
  height: 194px;
  top: 608px;
  left: 170px;
  background: url(http://greyvoth.com/A24/anim/gran-anim/gran-arm-l.png) no-repeat;
}

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

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

.gran_legs {
  width: 50px;
  height: 194px;
  top: 608px;
  left: 240px;
  background: url(http://greyvoth.com/A24/anim/gran-anim/gran-legs.png) no-repeat;
}

.bg_1 {
  width: 50px;
  height: 194px;
  top: 608px;
  left: 240px;
  background: url(http://greyvoth.com/A24/anim/gran-anim/gran-legs.png) no-repeat;
}

.gvm_logo_nu {
  width: 50px;
  height: 194px;
  top: 608px;
  left: 240px;
  background: url(http://greyvoth.com/A24/anim/gvm_logo.png) no-repeat;
}

.gvm_sign {
  width: 50px;
  height: 194px;
  top: 608px;
  left: 240px;
  background: url(http://greyvoth.com/A24/anim/sign.png) no-repeat;
}

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

/* 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;
}