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 -->
</body>
CSS
body {
background: #000;
}
#wrapper_1 {
width: 250px;
height: 234px;
background: #000;
position: relative;
margin: 50px auto;
}
/********** Стили для рта **********/
#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: rotate(-20deg);
}
.third_tooth {
width: 14px;
height: 20px;
background: #000;
top: 133px;
left: 76px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
-webkit-transform: rotate(-182deg);
-moz-transform: rotate(-182deg);
-ms-transform: rotate(-182deg);
-o-transform: rotate(-182deg);
transform: rotate(-182deg);
}
/********** Стили для позиционирования элементов **********/
#left_eye, #right_eye, #mouth_container, #inscription,
.part_mouth,
.first_tooth,
.second_tooth,
.third_tooth,
.first_part_left_eye,
.second_part_left_eye,
.third_part_left_eye,
.first_part_right_eye,
.second_part_right_eye,
.third_part_right_eye {
position: absolute;
}
/********** Стили для левого глаза **********/
#left_eye...