JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
		<figure class="smile">
			<div class="cape"></div>
			<!-- EARS -->
			<div class="ear leftEar">
				<div class="pinna leftPinna"></div>
			</div>
			
			<div class="ear rightEar">
				<div class="pinna rightPinna"></div>
			</div>
			<!-- END EARS -->
			
			<!-- HEAD -->
			<div class="yoda-head">
				
				
				<div class="browTop"></div>
				<div class="browBottom"></div>
				<div class="chinAndBrowPlus"></div>
				
				
				<div class="rotateBox boxLeft">
					<!-- Left Eye -->
					<div class="eye">
						<div class="eyeBall">
							<div class="pupil">
								<div class="dote"></div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="rotateBox boxRight">
					<!-- Right Eye -->
					<div class="eye">
						<div class="eyeBall">
							<div class="pupil">
								<div class="dote"></div>
							</div>
						</div>
					</div>
				</div>
				
				
				<div class="eyelidTopAnimation"></div>
				
				<div class="eyelidBottomAnimation"></div>
				
				<!-- Lips -->
				<div class="lipBottom"></div>
				<!-- End Lips -->
				
				<div class="nose"></div>
				
			</div>
			<!-- DARKSIDE https://jsfiddle.net/Jack_V_V/7oxm8m2g/embedded/result/ -->
			
			<div class="chinchinchin"></div>
			
			
			<!-- Foots -->
			
			<div class="leftFoot">
				<div class="leftFootBig"></div>
				<div class="leftFootMid"></div>
				<div class="leftFootSmall"></div>
			</div>
			
			<div class="rightFoot">
				<div class="rightFootBig"></div>
				<div class="rightFootMid"></div>
				<div class="rightFootSmall"></div>
			</div>
			<div class="capeShadow"></div>
			<!-- END Foots -->
			
            <!--  -->
			<div class="rightHand">
				<div class="rightMidFinger"></div>
				<div class="rightSmallFinger"></div>
				<div class="rightBigFinger"></div>
				
				<div class="lightSword">
					<div class="blade"></div>
					<div class="gripe"></div>
				</div>
			</div>
			
			<div class="leftHand">
				<div class="leftMidFinger"></div>
				<div...

CSS

/*-----------------------------------------*/
* {
  margin: 0;
  padding: 0;
}
/*!----------------------------------------!*/
.rotateBox {
  position: absolute;
  top: 46%;
  width: 30px;
  height: 30px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: 0;
}
.boxLeft {
  left: 24.5%;
}
.boxRight {
  right: 24%;
}
/*!---------------------------------------!*/
.wrap {
  box-sizing: border-box;
  width: 320px;
  height: 320px;
  padding-top: 80px;
  background-image: -webkit-radial-gradient(0% 100%, 1200px 400px, #404040, #262626 20%, #262626 20%, #030303 27%, #030303 27%, #000000 30%, #000000 30%, transparent 35%), -webkit-linear-gradient(bottom, #000000, #000000 45%, #483d8b 45%);
  background-image: radial-gradient(1200px 400px at 0% 100%, #404040, #262626 20%, #262626 20%, #030303 27%, #030303 27%, #000000 30%, #000000 30%, transparent 35%), linear-gradient(to top, #000000, #000000 45%, #483d8b 45%);
  background-color: #483d8b;
}
/*!---------------------------------------!*/
.smile {
  position: relative;
  width: 190px;
  height: 180px;
  margin: 0 auto;
}
.smile:before {
  content: '';
  position: absolute;
  bottom: -23%;
  left: 24%;
  height: 80px;
  width: 100px;
  background-color: #deb887;
  border-radius: 50% 50% 0 0;
  box-shadow: inset 0px 5px 0 0 #d3a05f;
  -webkit-animation: shoulder 20s infinite;
  animation: shoulder 20s infinite;
}
.smile .cape {
  position: absolute;
  bottom: -28%;
  left: 24%;
  border-style: solid;
  border-width: 26px 56px 30px 44px;
  border-color: transparent #f0ffff #f0ffff;
}
.smile .ear {
  position: absolute;
  top: 29%;
  border-style: solid;
  border-color: transparent transparent #8fbc8f;
}
.smile .ear .pinna {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #568f56;
  border-radius: 50%;
}
.smile .ear .leftPinna {
  top: 21px;
  left: -40px;
}
.smile .ear .leftPinna:before {
  content: '';
  position: absolute;
  top: 9px;
  left:...