JSFiddle - React, Tailwind, and code Playground

HTML

<div id='monster1'>
	<!--Тыква-->
	<div id='level1' class='panel1'></div>
	<div id='level2' class='panel1'></div>
	<div id='level3' class='panel1'></div>
	<div id='level4' class='panel1'></div>
	<div id='level5' class='panel1'></div>
	<div id='level6' class='panel1'></div>
	<div id='level7' class='panel1'></div>
	<!--Левый глаз-->
	<div id='leftEye1'>
		<div id='leftEye2'></div>
		<div id='leftEye3'></div>
	</div>
	<!--Правый-->
	<div id='rightEye1'>
		<div id='rightEye2'></div>
		<div id='rightEye3'></div>
	</div>
	<!--Нос-->
	<div id='nose1'>
		<div id='nose2'></div>
		<div id='nose3'></div>
	</div>
	<!--Рот-->
	<div id='mouth1'>
		<div id='tooth1'></div>
		<div id='tooth2'></div>
		<div id='tooth3'></div>
	</div>
	<!--Хвост-->

</div>

CSS

#monster1{
width: 700px; height: 500px; background: #eee; margin: 0px; padding: 0px; position: relative; display: inline-block;
box-shadow: 0 0 10px 1px #aaa, inset 0 0 10px 1px #ddd;
}



/*Тыква*/
.panel1{
position: absolute; top: 50px; width: 400px; height: 400px; border-radius: 400px;
border-left: solid #fe7903 2px; border-right: solid #fe7903 2px; box-shadow: inset 0 0 30px 3px #fbbe01;
}
#level1{background: #f18d01; width: 600px; left: 50px; box-shadow: 0 0 30px 3px #491d10;}
#level2{left: 84px;}
#level3{left: 118px;}
#level4{left: 152px;}
#level5{left: 186px;}
#level6{left: 220px;}
#level7{left: 254px;}
/*Левый глаз*/
#leftEye1{
position: absolute; top: 140px; left: 150px; width: 170px; height: 80px; z-index: 3; -webkit-transform: rotate(10deg);
overflow: hidden; border-top: solid #ee8100 5px;
}
#leftEye2{
position: absolute; top: -55px; left: 22px; width: 110px; height: 90px; background: #491d10; z-index: 2; -webkit-transform: rotate(42deg);
border: solid #ee8100 5px; box-shadow: 0 0 30px 5px #fbbe01, inset 0 0 30px 3px #8f181a;
}
#leftEye3{
position: absolute; top: 0px; left: 78px; width: 18px; height: 20px; background: #f18d01;  z-index: 2;
box-shadow: 0 0 30px 5px #8f181a; box-shadow: inset 0 0 10px 1px #8f181a;
}
/*Правый глаз*/
#rightEye1{
position: absolute; top: 140px; right: 150px; width: 170px; height: 80px; z-index: 3; -webkit-transform: rotate(-10deg);
overflow: hidden; border-top: solid #ee8100 5px;
}
#rightEye2{
position: absolute; top: -55px; right: 22px; width: 110px; height: 90px; background: #491d10; z-index: 2; -webkit-transform: rotate(-42deg);
border: solid #ee8100 5px; box-shadow: 0 0 30px 5px #fbbe01, inset 0 0 30px 3px #8f181a;
}
#rightEye3{
position: absolute; top: 0px; right: 78px; width: 18px; height: 20px; background: #f18d01;  z-index: 2;
box-shadow: 0 0 30px 5px #8f181a; box-shadow: inset 0 0 10px 1px #8f181a;
}
/*Нос*/
#nose1{
position: absolute; top: 180px; left: 285px; width: 130px; height: 80px; z-index: 3; overflow:...