JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="main">
           <div class="main-cat">
               <div class="main-cat-cap">
                   <div class="main-cat-cap-layer">
                       <div class="main-cat-cap-tail"></div>
                   </div>
               </div>
               <div class="main-cat-head">
                    <div class="main-cat-ear"></div>
                    <div class="main-cat-eye main-cat-eye-left">
                            <div class="main-cat-eye-pupil main-cat-eye-left-pupil">
                                <div class="main-cat-eye-pupil-glitter main-cat-eye-left-pupil-glitter"></div>
                            </div>
                    </div>  
                   
                    <div class="main-cat-eye main-cat-eye-right">
                        <div class="main-cat-eye-pupil main-cat-eye-right-pupil">
                            <div class="main-cat-eye-pupil-glitter main-cat-eye-right-pupil-glitter"></div>
                        </div>   
                    </div>
                    
                    <div class="main-cat-nose"></div>
                    <div class="main-cat-mustache"></div>
                    <div class="main-cat-mouth"></div>
               </div>
            </div>
            
            <div class="main-pumpkin">
		<div class="main-pumpkin-layer1">
                    <div class="main-pumpkin-layer2">
                        <div class="main-pumpkin-layertop">
                            <div class="main-cat-neck">  </div>
                        </div>
                    <div class="main-pumpkin-eyes">
                         <div class="main-pumpkin-eye-left-shadow"> 
                             <div class="main-pumpkin-eye-left">  </div>
                         </div>
                         <div class="main-pumpkin-eye-right-shadow"> 
                             <div class="main-pumpkin-eye-right">  </div>
                         </div>
                    </div>
                    ...

CSS

.main{
    width: 400px; 
    height: 400px;
    position: relative;
    margin:auto; 
    background:white; 
    border: 1px solid black;
}
.main-pumpkin {
    width: 270px; 
    height: 200px;
    position:absolute;
    top: 180px;
    left: 50px;
    background: #f39501; 
    border-radius:135px/100px;
    border: 1px solid black;
}
.main-pumpkin-layer1 {
    width: 200px; 
    height: 200px;
    margin: 2px 35px;
    background: #f39501; 
    border-radius:100px;
    border: 1px solid black;
 }
.main-pumpkin-layer2 {
    width: 114px; 
    height: 180px;
    margin: 21px 40px; 
    background: #f39501; 
    border-radius:50px/90px;
    border: 1px solid black;
 }
.main-pumpkin-layertop {
    width: 136px; 
    height: 32px;
    margin: -25px -10px;
    background: #ca7613; 
    border-radius:68px/20px;
    overflow: hidden;
    border: 1px solid black;

 }
 
.main-cat-neck {
    width:30px; 
    height:45px;
    margin: 0px 55px;
    background: black; 

 }

.main-pumpkin-eyes {
    width: 140px;
    height: 50px;
    margin:50px 0px 0px -15px;
}

.main-pumpkin-eye-left {
    width: 30px; 
    height: 40px;
    margin: 2px 2px; 
    background: black; 
    border-radius:80% 40%/80% 40% 0% 0%;
    border: 1px solid black;
 }
 
.main-pumpkin-eye-left-shadow {
    width: 30px; 
    height: 40px;
    float: left;
    margin:0px; 
    background: #f39501; 
    overflow: hidden;
    border-radius:80% 40%/80% 40% 0% 0%;
    border: 1px solid black;
 }
.main-pumpkin-eye-right {
    width: 30px; 
    height: 40px;
    border: 1px solid black;
    margin: 3px -3px 0px; 
    background: black; 
    border-radius:40% 80%/40% 80% 0% 0%;
    border: 1px solid black;
 }
.main-pumpkin-eye-right-shadow {
    width: 30px; 
    height: 40px;
    border: 1px solid black;
    margin: 0px 0px; 
    background: #f39501; 
    overflow: hidden;
    border-radius:40% 80%/40% 80% 0% 0%;
    float: right;
 }   

.main-pumpkin-nose-shadow{
    width: 22px; 
    height: 28px;
    margin:...