JSFiddle - React, Tailwind, and code Playground

HTML

<div class="spawn">
        <div class="head">
            <div class="inside-part">
                <div class="middle-divider">
                </div>
                
                <div class="forehead left-part-forehead"></div>
                <div class="forehead right-part-forehead"></div>
                
                <div class="eye-left">
                    <div>
                        <div class="pupil">
                            <div></div>
                        </div>
                    </div>
                </div>
                
                <div class="eye-right">
                    <div>
                        <div class="pupil">
                            <div></div>
                        </div>
                    </div>
                </div>
                
                <div class="mouth left-part-mouth"></div>
                <div class="mouth right-part-mouth"></div>
            </div>
        </div>
        
        <div class="neck">
            <div></div>
            <div></div>
            <div></div>
        </div>
        
        <div class="shoulders">
            <div class="left-part-trapeze"></div>
            <div class="right-part-trapeze"></div>
        </div>
    </div>

CSS

/* reset */
a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var, input {margin:0;padding:0;}
blockquote, q {quotes:none}
table, table td {padding:0;border:none;border-collapse:collapse} 
a { outline:none; cursor: pointer; }
img{ border: none;}
li {list-style: none;}

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary {
    display: block;
}

/* END reset */

html, body{
    position: relative;
    height: 100%;
}

body{
    background: #454545;
    min-height: 800px;
    min-width: 1100px;
}

.spawn{
    position: absolute;
    display: inline-block;
    bottom: 0;
    left: 50%;
    margin-left: -260px;
    height: 785px;
    -webkit-transform: scale(0.92,0.95);
    -moz-transform: scale(0.92,0.95);
    -ms-transform: scale(0.92,0.95);
}

/******************************Head*********************************/

.shoulders{
    height: 130px;
    width: 1100px;
    background-color: #202022;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -550px; 
    border-top-left-radius: 350px 160px ;
    border-top-right-radius: 350px 160px ;  
    z-index: 0;
}

.left-part-trapeze, .right-part-trapeze{
    position: absolute;
    top: -33px;
    width: 40px;
    height: 70px;
    background-color: #202022;
}

.left-part-trapeze{
    left: 320px;
    -webkit-transform: rotate(55deg);
    -moz-transform: rotate(55deg);
    -ms-transform: rotate(55deg);
}

.right-part-trapeze{
    right: 320px;
    -webkit-transform: rotate(-55deg);
    -moz-transform: rotate(-55deg);
   ...