JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<div class="show_wrap">

<div class="lefft">
  <div class="show_arm_1 parRot"></div>
  <div class="show_arm_2 parRot1"></div>
  <div class="show_leg_1"></div>
  <div class="show_leg_2"></div>
</div>

<div class="rigght">
  <div class="show_arm_1"></div>
  <div class="show_arm_2"></div>
  <div class="show_leg_1"></div>
  <div class="show_leg_2"></div>
</div>

<div class="miid">
  <div class="show_head cenntre"></div>
    <div class="show_bod_1 cenntre"></div>
    <div class="show_bod_2 cenntre"></div>
    <div class="show_bod_3 cenntre"></div>
</div>

</div>

CSS

.show_wrap { 
transform: scale(0.45);
/* 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 .show_head {
  z-index: 10;
  position: absolute;
  background: url(http://galnova.com/_show/show-head.png) no-repeat;
  width: 349px;
  height: 233px;
}

.miid .show_bod_1 {
  z-index: 11;
  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 {
  z-index: 10;
  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 {
  z-index: 9;
  top: 410px;
  position: absolute;
  float: left;
  background: url(http://galnova.com/_show/show-bod-3.png) no-repeat;
  width: 535px;
  height: 425px;
}

.lefft .show_arm_1 {
  z-index: 20;
  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 {
  z-index: 21;
  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 {
  z-index: 8;
  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 {
  z-index: 7;
  position: absolute;
  left: calc(50% - 720px);
  top: 1000px;
  background: url(http://galnova.com/_show/show-leg-2.png) no-repeat;
  width: 728px;
 ...