JSFiddle - React, Tailwind, and code Playground

by Vlad Merjevich

HTML

<figure>
	<div class="shadow"></div>
	<div class="foot-left"></div>
		<div class="foot-left-cut"></div>
	<div class="foot-right"></div>
		<div class="foot-right-cut"></div>
  <div class="wing-left">
		<div class="wing-left-сut1"></div>
		<div class="wing-left-сut2"></div>
		<div class="wing-left-сut3"></div>
	</div>
	<div class="wing-right">
	  <div class="wing-right-сut1"></div>
	  <div class="wing-right-сut2"></div>
      <div class="wing-right-сut3"></div>
  </div>
	<div class="body">
		<div class="eye">
			<div class="pupil"></div>
	  </div>
        <div class="smile">
			<div class="tooth1"></div>
			<div class="tooth2"></div>
        </div>
  </div>
</figure>

CSS

body {
	background: #fcaf17;
}
figure {
	display: block;
	position: relative;
	width: 400px;
	height: 410px;
	margin: 50px auto 0;
}
figure div {
	position: absolute;
}
.body {
	width: 270px;
	height: 360px;
	border-radius: 50%  50%  50%  50%  / 60% 60% 40% 40%;
	border: 5px solid #000;
	background: #19e007;
	background: radial-gradient(circle at bottom center, #3eef1b 60px, transparent 60px),
							radial-gradient(circle at 135px 100px, #b8fb5e, #19e007);
	box-shadow: inset 4px 0 0 10px #19e007;
	left: 60px;
	top: 2px; 
}
.eye {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: #fff;
	background: radial-gradient(circle at center, #fff, #71c1e6 56%, #fff 57%);
	border: 5px solid #000;
	left: 80px;
	top: 45px;
}
.pupil {
	width: 0; height: 0;
	border-radius: 50%;
  border: 20px solid #000;
	border-right-color: transparent;
	left: 30px; top: 30px;
}
.smile {
	width: 131px;
	height: 55px;
	border-bottom: 4px solid #000;
	border-radius: 50%;
	left: 72px;
	top: 195px;
	overflow: hidden;
}
.tooth1 {
	width: 22px;	height: 22px;
	background: #fff;
	border: 4px solid #000;
	left: 10px; bottom: -12px;
	-webkit-transform: rotate(54deg) skew(20deg, 20deg);
	transform: rotate(54deg) skew(20deg, 20deg);
}
.tooth2 {
	width: 20px;	height: 20px;
	background: #fff;
	border: 4px solid #000;
	right: 10px; bottom: -12px;
	-webkit-transform: rotate(30deg) skew(20deg, 20deg);
	transform: rotate(30deg) skew(20deg, 20deg);
}
.wing-left {
	background: #666;
	background: radial-gradient(at 40px 30px, #666 20%, #000);
	width: 180px;
	height: 105px;
	border-radius: 50%;
	top: 67px; left: -60px;
	transform: rotate(25deg);
	-webkit-transform: rotate(25deg);
}
.wing-left-сut1 {
	background: #fcaf17;
	width: 70px;
	height: 46px;
	border-radius: 50%;
	top: 83px;
	left: 94px;
}
.wing-left-сut2 {
	background: #fcaf17;
	width: 110px;
	height: 80px;
	border-radius: 50%;
	top: -35px;
	left: 77px;
	transform: rotate(15deg);
	-webkit-transform: rotate(15deg);	
}
.wing-left-сut3...