JSFiddle - React, Tailwind, and code Playground
by Keith Jeter
HTML
<div class="gran_wrap">
<div class="gvm_sign z-10"></div>
<div class="gvm_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_2 z-4"></div>
<div class="gran_legs z-3"></div>
</div>
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: 240px;
background: url(http://greyvoth.com/A24/anim/gran-anim/gran-head.png) no-repeat;
}
.gran_torso {
width: 50px;
height: 194px;
top: 608px;
left: 240px;
background: url(http://greyvoth.com/A24/anim/gran-anim/gran-torso.png) no-repeat;
}
.gran_l_arm {
width: 50px;
height: 194px;
top: 608px;
left: 240px;
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;
}
.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; }