JSFiddle - React, Tailwind, and code Playground

by Olga

HTML

<div class="wrap">
    <div class="sova">
        <div class="earleft"></div>
        <div class="earright"></div>
        <div class="tail"></div>
        <div class="eyebaself">
			<div class="eyeouterlf">
				<div class="eyeinlf"></div>
				<div class="wingleft"></div>
				<div class="wingright"></div>
				<div class="eyeinrh"></div>
			</div>
			<div class="beak"></div>
			<div class="legleft">
				<div class="leginleft"></div>
			</div>
			<div class="legright">
				<div class="leginright"></div>
			</div>
		</div>
        <div class="eyebaserh">
			<div class="eyeouterrh">
			</div>
		</div>
        <div class="forehead"></div>
    </div>
</div>

CSS

.wrap {
	width: 320px;
	height: 320px;
	background:linear-gradient(to bottom, #fff9c4 20%, #f48fb1 90%);
	overflow: hidden;  
}
.sova {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: #2196f3;
	text-align: center;
	margin: auto;
	position:relative;
	top:40px;
	box-shadow: 0 0 8px rgba(0,0,0,0.5);
}
.earleft {
	width: 80px;
	height: 80px;
	background:#2196f3;
	position:relative;
	top:1px;
	left:10px;
	-moz-transform: rotate(10deg); 
	-ms-transform: rotate(10deg); 
	-webkit-transform: rotate(10deg); 
	-o-transform: rotate(10deg); 
	transform: rotate(10deg);
	box-shadow: -5px -4px 4px -3px rgba(0,0,0,0.2);
} 
.earright {
	width: 80px;
	height: 80px;
	background:#2196f3;
	position:relative;
	top:-79px;
	left:110px;
	-moz-transform: rotate(-10deg); 
	-ms-transform: rotate(-10deg); 
	-webkit-transform: rotate(-10deg); 
	-o-transform: rotate(-10deg); 
	transform: rotate(-10deg);
	box-shadow: 4px -5px 4px -3px rgba(0,0,0,0.2);
} 
.tail {
	width: 60px;
	height: 60px;
	background:#2196f3;
	position:relative;
	top:0px;
	left:70px;
	border-radius: 0 0 30% 0;
	-moz-transform: rotate(45deg); 
	-ms-transform: rotate(45deg); 
	-webkit-transform: rotate(45deg); 
	-o-transform: rotate(45deg); 
	transform: rotate(45deg);
	box-shadow: 4px 3px 4px -3px rgba(0,0,0,0.2);
}	  
.eyebaself {
	width: 95px;
	height: 95px;
	border-radius: 50%;
	background: blue;
	position:relative;
	top:-188px;
	left:13px;
	box-shadow: 0 0 8px rgba(0,0,0,0.5)inset;
}  
.beak {
	width: 20px;
	height: 55px;
	background:#ff8a80;
	position:relative;
	bottom:160px;
	left:130px;
	border-radius: 20% 20% 50% 50%;
	z-index:2;
	top:10px;
	left:76px;
	box-shadow: 0 0 8px rgba(0,0,0,0.5)inset;
}
.eyebaserh {
	width: 95px;
	height: 95px;
	border-radius: 50%;
	background: blue;
	position:relative;
	top:-283px;
	left:91px;
	box-shadow: 0 0 8px rgba(0,0,0,0.5)inset;
}	
.forehead {
	width: 80px;
	height: 80px;
	background:#2196f3;
	border-radius: 50% 5% 0...