JSFiddle - React, Tailwind, and code Playground

HTML

<div class="monster">
        <div class="horn left-horn">
            <div></div>
        </div>
        <div class="horn right-horn">
            <div></div>
        </div>
        <div class="head">
            <div class="spot first"></div>
            <div class="spot second"></div>
            <div class="spot third"></div>
            
            <div class="eyebrow left-eyebrow"></div>
            <div class="eyebrow right-eyebrow"></div>
            
            <div class="eye left-eye">
                <div class="pupil">
                </div>
            </div>
            <div class="eye right-eye">
                <div class="pupil"></div>
            </div>
            
            <div class="mouth">
                <div class="tooth left-tooth"></div>
                <div class="tooth right-tooth"></div>
            </div>
        </div>
        
        <div class="body">
            <div class="belly">
                <div class="navel"></div>
            </div>
        </div>
        
        <div class="hand left-hand"></div>
        <div class="hand right-hand"></div>
        
        <div class="foot left-foot"></div>
        <div class="foot right-foot"></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;
    min-width: 500px;
    min-height: 600px;
}

body{
    background: #f1fdb7;
}

.monster{
    position: relative;
    width: 300px;
    margin: 100px auto 0;
    -webkit-transform: scale(1.3,1.3);
    -moz-transform: scale(1.3,1.3);
    -ms-transform: scale(1.3,1.3);
}

/*==============HEAD================*/

.head{
    position: relative;
    width: 300px;
    height: 300px;
    background: -moz-radial-gradient(center, ellipse cover,  #068bd8 0%, #0e69b8 36%, #0f5aab 48%, #213186 76%, #251a56 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#068bd8), color-stop(36%,#0e69b8), color-stop(48%,#0f5aab), color-stop(76%,#213186), color-stop(100%,#251a56)); /* Chrome,Safari4+ */
    background: -ms-radial-gradient(center, ellipse cover,  #068bd8 0%,#0e69b8 36%,#0f5aab 48%,#213186 76%,#251a56 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  #068bd8 0%,#0e69b8 36%,#0f5aab 48%,#213186 76%,#251a56 100%); /* W3C */
    border-radius: 150px;
    overflow: hidden;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
 ...