JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="body">
        <div class="shadow"></div>
        
        <div class="hair"></div>
        
        <div class="head"></div>
        
        <div class="ear ear-left"></div>
        <div class="ear ear-right"></div>

        <div class="eye eye-left">
            <div class="eyelid"></div>
        </div>
        <div class="eye eye-right">
            <div class="eyelid"></div>
        </div>
        
        <div class="nose"></div>
        
        <div class="mouth"></div>
        
        <div class="paw paw-front-left"></div>
        <div class="paw paw-front-right"></div>
        <div class="paw paw-back-left"></div>
        <div class="paw paw-back-right"></div>
        
        <div class="tail"></div>
    </div>
</div>

SCSS

$stroke-color: #7F4216;
$stroke-width: 0.4em;
$body-color: #F6C463;
$eye-color: #FCF6E8;
$tongue-color: #DE973B;
$bg-color: #68759C;
$rem: 10px;

.wrap {
    width: 320px;
    height: 320px;    
    
    background: $bg-color;
    position: relative;
}

.body {
    width: 17em;
    height: 17em;
    
    position: absolute;
    top: 0;    left: 0;
    bottom: 0; right: 0;
    
    margin: auto;
    
    font-size: $rem;
}

.hair {
    width: 4em;
    height: 3em;
    
    position: absolute;
    top: 0;    left: 0;
               right: 0;
    
    margin: -1.2em auto 0;
    
    background: $stroke-color;
    border-radius: 10%;
}

.hair:before {
    content: "";
    
    width: 0;
    height: 0;
    
    position: absolute;
    top: 0;    left: 50%;
    
    z-index: 2;
    
    margin: 1.2em 0 0 -2em;
    
    border-top: 1em solid $stroke-color;
    border-left: 2em solid transparent;
    border-right: 2em solid transparent;
}

.hair:after {
    content: "";
    
    width: 100%;
    height: 0.4em;
    
    position: absolute;
    top: 0.7em;    left: 0;
    
    z-index: 2;
    
    background: $stroke-color;
}


.head {    
    position: absolute;
    top: 0;    left: 0;
    bottom: 0; right: 0;
    
    z-index: 1;
    margin: -$stroke-width;
    
    background: $body-color;
    border-radius: 50%;
    border: $stroke-width solid $stroke-color;
    
    box-shadow: inset 0 -1.4em 0 rgba(0, 0, 0, 0.12);
}

.shadow {
    content: "";
    
    height: 40%;
    
    position: absolute;
    top: 80%;
    left: 0;
    right: 0;
    
    margin: 0 -2em;
    
    background: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
}

.ear {
    width: 4em;
    height: 4em;
    
    position: absolute;
    top: 0;
    
    background: $body-color;
    border-radius: 50%;
    border: $stroke-width solid $stroke-color;   
}

.ear-left {
    right: 0;
    
    transform: rotate(45deg);
}

.ear-right {
    left: 0;
    
    transform: rotate(-45deg);
}

.ear:after {
    content:...