JSFiddle - React, Tailwind, and code Playground

by PadVonE

HTML

<div class="image_block">
	<div class="eye">
		<div class="eye2"></div> 
	</div> 
	<div class="right_hand">
		<div class="palec1"></div>
		<div class="palec2"></div>
	
		<div class="palec3">
			<div class="elem1"></div>
		</div>
				<div class="elem2"></div>
				<div class="elem3"></div>
				<div class="hand_r1"></div>	
				<div class="hand_r2"></div>
				<div class="palec4"></div>
				<div class="elem4"></div>
	</div>
	<div class="right_sustav"> 
		<div class="top_hand"></div>
			<div class="top_hand2"></div>
			<div class="bottom_hand"></div>
			<div class="bottom_hand2"></div> 
	</div>
<div class="body"> 
	<div class="bt1">	</div>
	<div class="bt2">	</div>	
	<div class="bt3">	</div>
	<div class="br1">	</div>
	<div class="br2">	</div>
	<div class="bb1">	</div>
	<div class="bb2">	</div>
	<div class="bb3">	</div>
	<div class="bl1">	</div> 
	<div class="bl2">	</div>
	<div class="bl3">	</div>
		<div class="bc1">	</div>

</div>

<div class="left_sustav"> 
<div class="l1"></div> 
<div class="l2"></div>
<div class="l3"></div>
<div class="l4"></div>
<div class="l5"></div>

	</div>



	<div class="eye3">
		<div class="eye4"></div> 
	</div> 
	<div class="lp1"></div> 	 
<div class="lp12"></div> 
<div class="lp2"></div> 	 
<div class="lp22"></div> 
<div class="lp3"></div>  
<div class="lp32"></div> 
<div class="lp4"></div> 	 
<div class="lp42"></div>  

<div class="face">
	<div class="nose"></div>
	<div class="nose2"></div>
	<div class="nose3"></div>
	sdf
</div>

<div class="foot">
	<div class="left_foot">
		<div class="lf1"></div>
				<div class="lf2"></div> 
				<div class="lf3"></div>
					<div class="lf4"></div>
					<div class="lfp1"></div>
					<div class="lfp2"></div>
					<div class="lfp3"></div>
					<div class="lfp4"></div>
	</div>
	<div class="right_foot">
				<div class="rf1"></div>
				<div class="rf2"></div>
				<div class="rf3"></div>
				<div class="rfp1"></div>
				<div class="rfp2"></div>
				<div class="rfp3"></div>
				<div...

CSS

.image_block div{position: relative;}
.image_block{ position: absolute;

width: 600px; 
height: 600px;
/*margin-left: -300px;
margin-top: -300px; */
overflow: hidden;
border: 1px solid #111;
/*background: #b5db24;
*/}
.eye{
	width: 50px;  
	height: 52px;
	border: 1px solid #222;
	border-radius: 30px;
	position: relative;
	top: 50px;
	left: 70px;
	z-index: 100;
	background: #fff;
}

 .eye2{
width: 5px;  
	height: 7px;
	border: 1px solid #222;
	background: #222;
	border-radius: 3px;

	top: 20px;
	left: 21px;
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.5);
 }




.right_hand {
position:absolute !important;
}
.palec1 {
background: #fcb685;
width: 25px;
height: 24px;
border-radius: 14px;
border-left: 1px solid #222;

border-top: 1px solid #222;
top: -15px;
left: 72px;
z-index: 99;
}

.palec2 {
background: #fcb685;
width: 28px;
height: 27px;
border-radius: 14px;
border-left: 1px solid #222;
top: -17px;
z-index: 99;
left: 60px;
}

.palec3 {
background: #fcb685;width: 25px;height: 29px;border-radius: 14px;border: 1px solid #222;border-bottom: none;top: -22px;left: 60px;
}
.palec4 {
position: absolute;
background: #fcb685;
width: 20px;
height: 19px;
border-radius: 14px;

border-top: 1px solid #222;
border-left: 1px solid #222;
top: -197px;
left: 109px;
z-index: 103;
}


.elem1 {
background: #fcb685;
width: 17px;
height: 19px;
border-radius: 14px;
border: 1px solid #222;
border-left: none;
z-index: 103;
left: 4px;
top: -2px; 

}
.elem2 {
position: absolute;
background: #fcb685;
width: 19px;
height: 17px;
border-radius: 14px;
border-right: 1px solid #222;
border-top: 1px solid #222;
z-index: 100;
left: 66px;
top: -76px;
}
.elem3 {
position: absolute;
background: #fcb685;
width: 19px;
height: 17px;
border-radius: 14px;
border-right: 1px solid #222;
border-bottom: 1px solid #222; 
z-index: 100;
left: 81px;
top: -111px;
}
.elem4 {
position: absolute;
background: #fcb685;
width: 19px;
height: 27px;
border-radius: 21px;
border-right: 1px solid #222;
z-index: 99;
left: 116px;
top:...