JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="wrap">
<div class="inner">
	<div class="cycling">
		<div class="legs">
			<div class="leg left"><i></i></div>
			<div class="leg right"><i></i></div>
		</div>
		<div class="main">
			<div class="head">
				<i class="helmet"><i class="dtl"></i></i>
				<i class="face"><i class="dtl"></i></i>
				<i class="glass"></i>
			</div>
			<div class="chest"></div>
			<div class="hand-wrap">
				<div class="hand left"><i class="top"></i><i class="bottom"></i></div>
				<div class="hand right"><i class="top"></i><i class="bottom"></i></div>
			</div>
		</div>
		<div class="bike">
			<div class="wheel"></div>
			<div class="handle-wrap">
				<div class="hand left"></div>
				<div class="hand right"></div>
				<div class="handle"></div>
			</div>
		</div>
	</div>
</div>
</div>

CSS

body{
	margin:0;
	color:#444;
	background:#664a93;
	font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

.wrap{
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	position:fixed;
	overflow:hidden;
}
.inner{
	bottom:22%;
	width:100%;
	position:absolute;
}


.helmet:before,
.helmet:after,
.helmet .dtl:before,
.helmet .dtl:after,
.face:before,
.face:after,
.glass:before,
.glass:after,
.chest:before,
.chest:after,
.main .hand .bottom:after,
.legs:before,
.legs .leg:after,
.legs .leg:before,
.legs .leg>i:before,
.bike:before,
.bike:after,
.bike .wheel:before,
.bike .wheel:after,
.bike .hand:before,
.bike .hand:after{
	content:'';
	position:absolute;
}
.cycling{
	bottom:0;
	left:50%;
	width:150px;
	margin-left:-75px;
	position:absolute;
}
.legs{
	width:75px;
	margin:auto;
	position:relative;
}
.legs:before{
	top:0;
	width:75px;
	height:90px;
	position:absolute;
	border:20px solid #49829a;
	border-bottom:none;
}
.legs .leg{
	top:80px;
	z-index:1;
	width:20px;
	height:160px;
	position:absolute;
	background:#ff9266;
	border-radius:20px 20px 0 0;
}
.legs .leg:before{
	bottom:0;
	height:80px;
	width:inherit;
}
.leg.left{animation:leg-l 1.2s linear infinite}
.leg.right{right:0;animation:leg-r 1.2s linear infinite}
.leg.left:before{background-color:#5596aa}
.leg.right:before{background-color:#61b2be}
.legs .leg:after{
	left:50%;
	bottom:0;
	width:30px;
	height:12px;
	margin-left:-15px;
	background-color:#55303c;
}
.legs .leg>i{
	bottom:0;
	height:22px;
	width:inherit;
	position:absolute;
	background-color:#fff;
	border-radius:50% 50% 0 0;
}
.legs .leg>i:before{
	height:5px;
	bottom:70px;
	width:inherit;
	background-color:inherit;
}
@keyframes leg-l{
	0%,100%{top:15px}
	50%{top:80px}
}
@keyframes...