JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<!-- START MONSTER FACE -->
	<div id="wrapper_1">
		<div id="mouth_container">
			<div class="part_mouth">
				<div class="first_tooth"></div>
				<div class="second_tooth"></div>
				<div class="third_tooth"></div>
			</div>
		</div>
		<div id="left_eye">
			<div class="first_part_left_eye">
				<div class="second_part_left_eye">
					<div class="third_part_left_eye"></div>
				</div>
			</div>
		</div>
		<div id="right_eye">
			<div class="first_part_right_eye">
				<div class="second_part_right_eye">
					<div class="third_part_right_eye"></div>
				</div>
			</div>
		</div>
	</div>
	<!-- END MONSTER FACE -->

	<!-- START MONSTER FACE -->
	<div id="wrapper_2">
		<div id="mouth_container">
			<div class="part_mouth">
				<div class="first_tooth"></div>
				<div class="second_tooth"></div>
				<div class="third_tooth"></div>
			</div>
		</div>
		<div id="left_eye">
			<div class="first_part_left_eye">
				<div class="second_part_left_eye">
					<div class="third_part_left_eye"></div>
				</div>
			</div>
		</div>
		<div id="right_eye">
			<div class="first_part_right_eye">
				<div class="second_part_right_eye">
					<div class="third_part_right_eye"></div>
				</div>
			</div>
		</div>
	</div>
	<!-- END MONSTER FACE -->

	<!-- START MONSTER FACE -->
	<div id="wrapper_3">
		<div id="mouth_container">
			<div class="part_mouth">
				<div class="first_tooth"></div>
				<div class="second_tooth"></div>
				<div class="third_tooth"></div>
			</div>
		</div>
		<div id="left_eye">
			<div class="first_part_left_eye">
				<div class="second_part_left_eye">
					<div class="third_part_left_eye"></div>
				</div>
			</div>
		</div>
		<div id="right_eye">
			<div class="first_part_right_eye">
				<div class="second_part_right_eye">
					<div class="third_part_right_eye"></div>
				</div>
			</div>
		</div>
	</div>
	<!-- END MONSTER FACE -->

	<!-- START MONSTER FACE -->
	<div id="wrapper_4">
		<div id="mouth_container">
			<div class="part_mouth">
				<div...

CSS

body {
	background: #000;
}
/********** Стили для контейнеров изображения **********/
#wrapper_1 {
	width: 250px;
	height: 234px;
	margin: -264px 15px;
	background: #000;
	position: relative;
	top: 459px;
	left: 120px;
}

#wrapper_2 {
	width: 250px;
	height: 234px;
	margin: -264px 15px;
	background: #000;
	position: relative;
	top: 395px;
	left: 452px;
}

#wrapper_3 {
	width: 250px;
	height: 234px;
	margin: -264px 15px;
	background: #000;
	position: relative;
	top: 375px;
	left: 805px;
}

#wrapper_4 {
	width: 250px;
	height: 234px;
	margin: -264px 15px;
	background: #000;
	position: relative;
	top: 595px;
	left: 1229px;
}

#wrapper_5 {
	width: 250px;
	height: 234px;
	margin: -264px 15px;
	background: #000;
	position: relative;
	top: 390px;
	left: 1570px;
}

#wrapper_6 {
	width: 250px;
	height: 234px;
	margin: -264px 15px;
	background: #000;
	position: relative;
	top: 310px;
	left: 322px;
}
/********** Стили для рта **********/
#mouth_container {
	width: 154px;
	height: 123px;
	background: #fb8a07;
	box-shadow: inset 0 0 8px 9px #f9ff7c;
	overflow: hidden;
	top: 94px;
	left: 47px;
	border-bottom-left-radius: 205px;
	border-bottom-right-radius: 200px;
}

.part_mouth {
	width: 168px;
	height: 123px;
	background: #000;
	top: -22px;
	left: -8px;
	border-bottom-left-radius: 227px;
	border-bottom-right-radius: 226px;
}

.first_tooth {
	width: 15px;
	height: 20px;
	background: #000;
	top: 110px;
	left: 50px;

	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;

	-webkit-transform: rotate(14deg);
	   -moz-transform: rotate(14deg);
	    -ms-transform: rotate(14deg);
	     -o-transform: rotate(14deg);
	        transform: rotate(14deg);
}

.second_tooth {
	width: 14px;
	height: 20px;
	background: #000;
	top: 110px;
	left: 102px;

	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;

	-webkit-transform: rotate(-20deg);
	   -moz-transform: rotate(-20deg);
	    -ms-transform: rotate(-20deg);
	     -o-transform: rotate(-20deg);
	        transform:...