JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div id="container">
<div id="ear">
<div id="ear_detail_1"></div>
</div>
<div id="blood_1"></div>
<div id="blood_2"></div>
<div id="blood_3"></div>
<div id="blood_detail_1"></div>
<div id="blood_detail_2"></div>
<div id="blood_detail_3"></div>
<div id="head">
<div id="ear_detail_2"></div>
<div id="ear_detail_3"></div>
<div id="ear_detail_4"></div>
<div id="ear_detail_5"></div>
<div id="eyelash_left_1"></div>
<div id="eyelash_left_2"></div>
<div id="eyelash_left_3"></div>
<div id="eyelash_right_1"></div>
<div id="eyelash_right_2"></div>
<div id="forehead"></div>
<div id="forehead_detail_1"></div>
<div id="forehead_detail_2"></div>
<div id="nose">
<div id="nose_detail_1"></div>
<div id="nose_detail_2"></div>
</div>
<div id="butterfly_detail_2"></div>
<div id="butterfly_detail_1">
<div id="butterfly_content_detail_1"></div>
<div id="butterfly_content_detail_2"></div>
</div>
<div id="butterfly_detail_3"></div>
<div id="eye_1">
<div id="orbit"></div>
</div>
<div id="eye_2">
<div id="eye_detail_1"></div>
<div id="eye_detail_2"></div>
<div id="eye_detail_3"></div>
<div id="pencil">
<div id="pencil_conteiner">
<div id="pencil_detail_1"></div>
<div id="pencil_detail_2"></div>
<div id="pencil_detail_3"></div>
<div id="pencil_detail_4"></div>
<div id="pencil_detail_5"></div>
<div id="pencil_detail_6"></div>
</div>
</div>
</div>
<div id="mouch">
<div id="tongue_container">
<div id="tongue"></div>
<div id="tongue_detail_1"></div>
<div id="tongue_detail_2"></div>
<div id="tongue_detail_3"></div>
</div>
<div id="mouch_detail_1">
<div id="tooth">
<div id="tooth_detail_1"></div>
<div id="tooth_detail_2"></div>
</div>
</div>
<div...
CSS
/********** Сброс стилей **********/
* {
margin: 0;
padding: 0;
}
/********** Позиционирование основного контейнера **********/
#wrapper {
width: 519px;
height: 497px;
position: relative;
margin: 50px auto;
}
/********** Абсолютное позиционирование элементов изображения **********/
#container, #head, #forehead, #forehead_detail_1, #forehead_detail_2, #nose,
#nose_detail_1, #nose_detail_2, #butterfly_detail_1, #butterfly_content_detail_1,
#butterfly_detail_2, #butterfly_content_detail_2, #butterfly_detail_3, #eye_1, #eye_2,
#orbit, #pencil, #pencil_conteiner, #pencil_detail_1, #pencil_detail_2, #pencil_detail_3,
#pencil_detail_4, #pencil_detail_5, #pencil_detail_6,
#eye_detail_1, #eye_detail_2, #eye_detail_3,
#eyelash_left_1, #eyelash_left_2, #eyelash_left_3,
#eyelash_right_1, #eyelash_right_2, #blood_1, #blood_2, #blood_3,
#blood_detail_1, #blood_detail_2, #blood_detail_3,
#ear, #ear_detail_1, #ear_detail_2, #ear_detail_3, #ear_detail_4, #ear_detail_5,
#mouch, #mouch_detail_1, #mouch_detail_2, #mouch_detail_3, #mouch_detail_4,
#tooth, #tooth_detail_1, #tooth_detail_2, #tongue_container, #tongue,
#tongue_detail_1, #tongue_detail_2, #tongue_detail_3 {
position: absolute;
}
/********** Позиционирование второстепенного контейнера **********/
#container {
width: 443px;
height: 442px;
background: #dbc3f7;
border: 21px solid #ba7dfe;
border-radius: 50%;
top: 6px;
left: 6px;
opacity: .;
}
/********** Голова **********/
#head {
width: 407px;
height: 329px;
background: #ffc5c4;
border: 6px solid #000;
border-radius: 50%;
top: 70px;
left: 19px;
-webkit-transform: rotate(-13deg);
-moz-transform: rotate(-13deg);
-ms-transform: rotate(-13deg);
-o-transform: rotate(-13deg);
transform: rotate(-13deg);
}
/********* Лобная часть **********/
#forehead {
width: 110px;
height: 130px;
background: #ffd2e0;
top: -3px;
left: 190px;
}
#forehead_detail_1 {
width: 73px;
height: 104px;
background: #ffc5c4;
border: 4px solid...