JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div class="mnstr_head">
        <div class="eye_bl rounded">
            <div class="eye rounded"></div>
        </div>
        <div class="mnstr_neck"></div>
    </div>
    <div class="mnstr_body">
        <div class="spot_1"></div>
        <div class="spot_2"></div>
        <div class="spot_3"></div>
        <div class="mouth">
            <div class="teeth"></div>
        </div>
    </div>
    <div class="left_hand hand">
        <div class="elbow"></div>
        <div class="palm"></div>
    </div>
    <div class="right_hand hand">
        <div class="elbow"></div>
        <div class="palm"></div>
    </div>
    <div class="leg left_leg"></div>
    <div class="leg right_leg"></div>
</div>

CSS

.rounded {
   
}
#main {
    height: 400px;
    width: 400px;
    margin: 40px auto 0;
    position: relative;
}
.mnstr_head {
    width: 107px;
    height: 152px;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}
.eye_bl {
    height: 94px;
    width: 97px;
    background: #e3a3f5;
    padding: 6px 7%;
    position: relative;
    box-shadow: 0 1px 0px #CC61EB;
    z-index: 2;
    margin-left: -8px;
}
.eye {
    position: relative;
    width: 97px;
    height: 93px;
    background: #fff;
    box-shadow: 0 1px 3px #cc61eb;
}
.eye:after {
    content: '';
    height: 41px;
    width: 41px;
    border-radius: 100%;
    background: #000;
    position: absolute;
    top: 23px; left: 26px;
    box-shadow: 0 -5px 0 #e0dfdf;
}
.eye:before {
    content: '';
    width: 8px;
    height: 4px;
    background: #fff;
    border-radius: 2px;
    position: absolute;
    top: 50%; left: 50%;
    margin: -11px 0 0 -12px;
    z-index: 1;
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.mnstr_neck {
    position: relative;
    z-index: 1;
    width: 25px;
    height: 49px;
    margin: -3px auto;
    background: -moz-linear-gradient(top,  rgba(227,163,245,1) 50%,rgba(201,117,227,1) 50%);
    background: -webkit-linear-gradient(rgba(227,163,245,1) 50%,rgba(201,117,227,1) 50%);
    background: -o-linear-gradient(top,  rgba(227,163,245,1) 50%,rgba(201,117,227,1) 50%);
    background: linear-gradient(rgba(227,163,245,1) 50%,rgba(201,117,227,1) 50%);
    background-size: 25px 20px;
}
.mnstr_body {
    height: 230px;
    width: 257px;
    position: relative;
    margin: 0 auto;
    border-radius: 47%;
    background: linear-gradient(to bottom, rgba(227,163,245,1) 0%,rgba(225,161,244,1) 100%);
    box-shadow: 0 -14px 0 #DD98F1 inset, 0 6px 0 #DD99F1 inset;
    z-index: 3;
}
.spot_1 {
    position: absolute;
    top: 30%; left: 20%;
    width: 8px;
    height: 5px;
    background:...