JSFiddle - React, Tailwind, and code Playground

by Olga

HTML

<div class="wrap">
	<div class="maska">
		<div class="eye">
			<div class="eyeleft"></div>
			<div class="eyeright"></div>
			<div class="foreheadlineo"></div>
			<div class="foreheadlinet"></div>
			<div class="foreheadlinef"></div>
			<div class="foreheadlinefo"></div>
		</div>	
		<div class="nose">
			<div class="noseedge"></div>
			<div class="nosebase"></div>
			<div class="onel"></div>
			<div class="twol"></div>
			<div class="threel"></div>
			<div class="fourl"></div>
			<div class="oner"></div>
			<div class="twor"></div>
			<div class="threer"></div>
			<div class="fourr"></div>
		</div>
		<div class="mouth">
			<div class="mouthinner"></div>
		</div>
		<div class="eyebrow">
			<div class="eyebrowl"></div>
			<div class="eyebrowr"></div>
			<div class="eyebrowtl"></div>
			<div class="eyebrowtr"></div>
		</div>
	</div>
</div>

CSS

.wrap {
	width: 320px;
	height: 320px;
	background: #a1887f;
	overflow: hidden;
}
.maska{
	width: 150px;
	height: 200px;
	margin: auto;
	background: #3e2723;
	position:relative;
	top: 70px;
	border-radius: 10% 10% 50% 50%;
	box-shadow: 0 0 8px rgba(0,0,0,0.5);
	animation: bg 10s;
}
.eyeleft {
	width: 55px;
	height: 20px;
	background: #a1887f;
	position:relative;
	top:65px;
	left:8px;
	border-radius: 40% 40% 50% 50%;
	box-shadow: 0 0 8px rgba(0,0,0,0.5) inset;
}
.eyeright {
	width: 55px;
	height: 20px;
	background: #a1887f;
	position:relative;
	top:45px;
	left:87px;
	border-radius: 40% 40% 50% 50%;
	box-shadow: 0 0 8px rgba(0,0,0,0.5) inset;
}
.foreheadlineo{
	width: 5px;
	height: 55px;
	background: #ffd180;
	position:relative;
	top:-30px;
	left:72px;
	border-radius: 40% 40% 50% 50%;
	animation: foreo 100s;
	animation-delay: 5s;
}
.foreheadlinet{
	width: 5px;
	height: 55px;
	background: #ffd180;
	position:relative;
	top:-85px;
	left:72px;
	border-radius: 40% 40% 50% 50%;
	animation: foret 100s;
	animation-delay: 5s;
}
.foreheadlinef{
	width: 5px;
	height: 55px;
	background: #ffd180;
	position:relative;
	top:-140px;
	left:72px;
	border-radius: 40% 40% 50% 50%;
}
.noseedge {
	width: 5px;
	height: 60px;
	background: #ffd180;
	position:relative;
	top:-125px;
	left:72px;
	border-radius: 20% 20% 0 0;
}
.nosebase {
	width:45px;
	height: 10px;
	background: #ffd180;
	border-radius: 20% 20% 50% 50%;	
	position:relative;
	top:-130px;
	left:52px;
}
.onel{	
	width: 10px;
	height: 10px;
	background: #efebe9;
	position:relative;
	top:-184px;
	left:4px;
	border-radius:50%;	
}
.twol{
	width: 9px;
	height: 10px;
	background: #efebe9;
	position:relative;
	top:-188px;
	left:20px;
	border-radius:50%;
}
.threel{	
	width: 8px;
	height: 10px;
	background: #efebe9;
	position:relative;
	top:-197px;
	left:35px;
	border-radius:50%;
}
.fourl{	
	width: 7px;
	height: 10px;
	background: #efebe9;
	position:relative;
	top:-209px;
	left:50px;
	border-radius:50%;
}
.oner{	
	width: 10px;
	height:...