JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div class="mnstr_body">
        <div class="chin">
            <div class="chin_2"></div>
            <div class="bottom_lip"></div>
            <div class="mouth">
                <div class="tongue"></div>
                <div class="tooth_1"></div>
                <div class="tooth_6" style=""></div>
                <div class="tooth_5"></div>
                <div class="tooth_2"></div>
                <div class="tooth_3"></div>
                <div class="tooth_4"></div>
                <div class="tooth_7"></div>
                <div class="tooth_8"></div>
                <div class="tooth_9"></div>
                <div class="tooth_10"></div>
            </div>
            <div class="top_lip"></div>
            <div class="moska"></div>
            <div class="nose">
                <div class="nostril nostril_left"></div>
                <div class="nostril nostril_right"></div>
            </div>
            <div class="eyes">
                <div class="eye eye_left">
                    <div class="eye_bl">
                        <div class="pupil"></div>
                    </div>
                </div>
                <div class="blang blang_left"></div>
                <div class="eye eye_right">
                    <div class="eye_bl">
                        <div class="pupil"></div>
                    </div>
                </div>
                <div class="blang blang_right"></div>
            </div>
        </div>
    </div>
    <div class="hand hand_left">
        <div class="elbow"></div>
        <div class="finger finger_1"></div>
        <div class="finger finger_2"></div>
        <div class="finger finger_3"></div>
    </div>
    <div class="hand hand_right">
        <div class="elbow"></div>
        <div class="finger finger_1"></div>
        <div class="finger finger_2"></div>
        <div class="finger finger_3"></div>
    </div>
    <div class="thorns">
        <div class="thorn_left thorn thorn_1"></div>
     ...

CSS

#main {
    width: 200px;
    margin: 110px auto 0;
    position: relative;
}
.mnstr_body { 
    width: 212px; 
    height: 242px; 
    background: #57b954;
    box-shadow: 0 -13px 34px #000000 inset;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; 
    position: relative;
    z-index: 3;
}
.chin { 
    width: 155px; 
    height: 160px; 
    background: #55bb55;
    box-shadow: 0 -3px 16px #000000 inset;
    border-radius: 74% 74% 66% 66% / 78% 88% 40% 40%; 
    position: absolute;
    top: 15px;
    left: 50%;
    margin-left: -77px;
}
.chin_2 { 
    width: 147px; 
    height: 160px; 
    background: rgb(85,185,86); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(85,185,86,1) 0%, rgba(14,81,40,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(85,185,86,1)), color-stop(100%,rgba(14,81,40,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(85,185,86,1) 0%,rgba(14,81,40,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(85,185,86,1) 0%,rgba(14,81,40,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(85,185,86,1) 0%,rgba(14,81,40,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(85,185,86,1) 0%,rgba(14,81,40,1) 100%); /* W3C */
    box-shadow: 0 -11px 18px rgba(20,49,29,0.8)  inset;
    border-radius: 74% 74% 66% 66% / 78% 88% 40% 40%; 
    margin: -9px 0 0 -73px;
    position: absolute;
    left: 50%;
} 
.mouth {
    background: #000;
    width: 130px;
    height: 103px;
    position: absolute;
    margin: 24px 0 0 -64px;
    left: 50%;
    border-radius: 135px 135px 117px 117px / 135px 135px 90px 71px;
    position: relative;
    overflow: hidden;
}
.bottom_lip {
    height: 64px;
    width: 132px;
    position: absolute;
    margin: 0;
    box-shadow: 0 -11px 18px rgba(0, 0, 0, 0.4) inset;
    top: 71px; left: 12px;
    border-radius: 15% 15% 50% 50%;
}
.top_lip {
    width:...