JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<div class="show_wrap">

  <div class="lefft upDown z-10">
    <div class="show_arm_1 parRot1"></div>
    <div class="show_arm_2 parRot"></div>

  </div>

  <div class="lefft">
    <div class="show_leg_1 upDown"></div>
    <div class="show_leg_2"></div>
  </div>

  <div class="rigght upDown z-10">
    <div class="show_arm_1"></div>
    <div class="show_arm_2"></div>
  </div>
  
  <div class="rigght">
    <div class="show_leg_1 upDown"></div>
    <div class="show_leg_2"></div>
  </div>

  <div class="miid upDown">
    <div class="show_head cenntre z-10"></div>
    <div class="show_bod_1 cenntre z-9"></div>
    <div class="show_bod_2 cenntre z-8"></div>
    <div class="show_bod_3 cenntre z-7"></div>
  </div>

</div>

CSS

.show_wrap {
  transform: scale(0.3);
  /* overflow: hidden; */
  /* width: 2000px; */
  /* height: auto; */
  /* height: 1672px; */
  margin: 0 auto 0 auto;
  padding: 0;
  background: pink;
}

/* .show_wrap > .lefft { 
  display: block;
  float: left;
  overflow: hidden;
}

.show_wrap > .rigght {
  display: block;
  float: right;
  overflow: hidden;
} */

.cenntre {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.miid {
  display: block;
  position: relative;
}

.miid .show_head {
  position: absolute;
  background: url(http://galnova.com/_show/show-head.png) no-repeat;
  width: 349px;
  height: 233px;
}

.miid .show_bod_1 {
  top: 100px;
  position: absolute;
  float: left;
  background: url(http://galnova.com/_show/show-bod-1.png) no-repeat;
  width: 698px;
  height: 526px;
}

.miid .show_bod_2 {
  top: 400px;
  position: absolute;
  float: left;
  background: url(http://galnova.com/_show/show-bod-2.png) no-repeat;
  width: 326px;
  height: 173px;
}

.miid .show_bod_3 {
  top: 410px;
  position: absolute;
  float: left;
  background: url(http://galnova.com/_show/show-bod-3.png) no-repeat;
  width: 535px;
  height: 425px;
}

.lefft {
  background: pink;
  display: block;
  position: relative;
}

.lefft .show_arm_1 {
  position: absolute;
  left: calc(50% - 550px);
  top: 135px;
  background: url(http://galnova.com/_show/show-arm-1.png) no-repeat;
  width: 341px;
  height: 508px;
}

.lefft .show_arm_2 {
  position: absolute;
  left: calc(50% - 675px);
  top: 525px;
  background: url(http://galnova.com/_show/show-arm-2.png) no-repeat;
  width: 346px;
  height: 700px;
}

.lefft .show_leg_1 {
  position: absolute;
  left: calc(50% - 490px);
  top: 600px;
  background: url(http://galnova.com/_show/show-leg-1.png) no-repeat;
  width: 486px;
  height: 550px;
}

.lefft .show_leg_2 {
  position: absolute;
  left: calc(50% - 720px);
  top: 1000px;
  background: url(http://galnova.com/_show/show-leg-2.png)...