JSFiddle - React, Tailwind, and code Playground

HTML

<body>
      <div id="monsterworld"> 
           <div class="chain">
              <div class="handle">
                 <div class="glove">
              <div class="digit">
                <div></div>
                <div></div>
                <div></div>
              </div>
             </div>  
              <div class="circ1"></div>
              <div class="circ2"></div>
              <div class="circ3"></div>
              <div class="circ4"></div>
              <div class="circ5"></div>
              <div class="circ6"></div>
              <div class="circ7"></div>
              <div class="circ8"></div>
              <div class="circ9"></div>
              <div class="circ10"></div>
              <div class="circ11"></div>
              <div class="circ12"></div>
              <div class="circ13"></div>
              <div class="circ14"></div>
              <div class="circ15"></div>
              <div class="circ16"></div>
              <div class="circ17"></div>
              <div class="circ18"></div>
              <div class="circ19"></div>
              <div class="circ20"></div>
              <div class="circ21"></div>
              <div class="circ22"></div>
              <div class="circ23"></div>
              <div class="circup1"></div>
              <div class="circup2"></div>
              <div class="circup3"></div>
              <div class="circup4"></div>
              <div class="circup5"></div>
              <div class="circup6"></div>
              <div class="circup7"></div>
              <div class="circup8"></div>
              <div class="circup9"></div>
              <div class="circup10"></div>
              <div class="circup11"></div>
              <div class="circup12"></div>
              <div class="circup13"></div>
              <div class="circup14"></div>
              <div class="circup15"></div>
              <div class="circup16"></div>
              <div class="circup17"></div>
              <div...

CSS

body {
   padding: 0;
   margin: 0;
}
#monsterworld {
   width: 600px;
   height: 450px;
   margin: 0 auto;
   position: relative;
   border: 1px solid black;
   background: #130951;
   overflow: hidden;   
}
#asphalt,  .marking, .border1,  .border2, .line, .chain, .handle {
   position: absolute;
}
#asphalt {
   width: 100%;
   height: 300px;
   top: 245px;
   background: #42434e;  
}
.marking {
   width: 100%;
   height: 10px;
   top: 100px;           
}               
.marking div {
   position: relative;
   width: 27px;
   height: 5px;
   background: #77788a;
   float:left;
   margin: 0 5px 0 12px;
   -webkit-transform: skew(50deg);
   -moz-transform: skew(50deg);
   -o-transform: skew(50deg);
   -ms-transform: skew(50deg);
   transform: skew(50deg);
}

.border1 {
   width: 100%;
   height: 30px;
   background: #5a5c6d;
   top: 20px;
}
.border1 div {
   position: relative;
   width: 60px;
   height: 100%;
   border-right: 3px solid #73747e;
   float: left;
   border-left: 1px solid #42434e;    
}                 
.border2 {              
   width: 100%;
   height: 20px;
   background: #7b7c91;
   top: 195px;
}
.border2 div {
   position: relative;
   width: 147px;
   height: 100%;
   border-right: 3px solid #56576f;
   float: left;
   border-left: 1px solid #444655;
}
.line {
   width: 100%;
   height: 100%;
   overflow: hidden;
   background: transparent;
}
.line  div {
   position: relative;
   width: 100%;
   height: 1px;
   border-top: 2px solid #4d4f5b;
}
.handle {
   z-index: 997;
   width: 12px;
   height: 60px;
   background: black;
   -webkit-transform: rotate(-20deg);
   -moz-transform:    rotate(-20deg);
   -ms-transform:     rotate(-20deg);
   -o-transform: rotate(-20deg);
   transform: rotate(-20deg);
   top: 240px;
   left: 148px;
   border-radius: 5px;
   border: 1px solid grey;
}
.handle:after {
   position: absolute;
   content: "";
   background: grey;
   width: 12px;
   height: 10px;
   top: 50px;
}
.handle:before {
   position: absolute;
 ...