JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<div id='containor'>
   <div class='overall'>
     <i class='head'></i>
     <div class='body'>
         <i class='middleBody'></i>
         <i class='hand1'></i>
         <i class='hand2'></i>
     </div>
     <i class='leg1'></i>
     <i class='leg2'></i>
   </div>
 </div>

CSS

#containor {
	background: #CEF6E3;
	width: 600px;
	height: 250px;
	margin: 50px auto;
	text-align: center;
	display: block;
	box-shadow: 0 50px 100px 10px #555 inset;
}
.body {
	display: inline-block;
	position: absolute;
	margin: -140px 0 0 3px;
}

.head {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #000;
	position: absolute;
	margin-top: 85px;
	margin-left: 0px;
}

.middleBody {
	background: #000;
	height: 40px;
	width: 10px;
	display: block;
	position: absolute;
	margin-top: 249px;
	margin-left: -7px;
	border-radius: 100%;
	transform: scale(2.2,1.3) skewY(-30deg);
	-webkit-transform: scale(2.2,1.3) skewY(-30deg);
	-moz-transform: scale(2.2,1.3) skewY(-30deg);
}
.overall {
	animation: overall 9s infinite ease-in;
	-webkit-animation: overall 9s infinite ease-in;
	-moz-animation: overall 9s infinite ease-in;
}

.hand1, .hand2 {
	height: 35px;
	margin-top: 250px;
	margin-left: -5px;
	height: 50px;
	width: 5px;
	background: #000;
	display: inline-block;
}
.leg1, .leg2 {
	margin-top: 150px;
	margin-left: -5px;
	height: 50px;
	width: 5px;
	background: #000;
	display: inline-block;
}

.hand1:after, .hand2:after {
	content: '';
	width: 8px;
	height: 5px;
	border-radius: 50%;
	background: #000;
	position: absolute;
	margin-top: 47px;
	margin-left: -4px;
}
.leg2:after, .leg1:after {
	content: '';
	width: 10px;
	height: 5px;
	background: #000;
	display: inline-block;
	position: absolute;
	margin-top: 45px;
}

.leg1, .hand2 {
	transition: all 0.3s;
	transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	animation: movement1 0.5s alternate infinite ease-out;
	-webkit-animation: movement1 0.5s alternate infinite ease-out;
	-moz-animation: movement1 0.5s alternate infinite ease-out;
}
.leg2, .hand1 {
	transition: all 0.3s;
	transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	animation: movement2 0.5s alternate infinite ease-in;
	-webkit-animation: movement2 0.5s alternate infinite...