JSFiddle - React, Tailwind, and code Playground

by Peter Sandoval Moreno

HTML

<div class="robot">
		  <div class="azul"></div>
		  <div class="ojo"></div>
		  <div class="detalles-1"></div>
		  <div class="detalles-2"></div>
  <div class="detalles-3"></div>
  <div class="detalles-4">
			    <div class="circulo"></div>
		  </div>
		  <div class="detalles-5"></div>
	</div>

CSS

body {
	background: #E5552E;
}

.robot {
	width: 375px;
	height: 225px;
	background: -webkit-linear-gradient(
		        left,
		        #E2E4E8 50%,
		        #B4B5B7 50%
		        );
	border-radius: 225px 225px 0px 0px;
    box-shadow: 1px 1px 0px 0px #AF3F28,
				2px 2px 0px 0px #AF3F28,
				3px 3px 0px 0px #AF3F28,
				4px 4px 0px 0px #AF3F28,
				5px 5px 0px 0px #AF3F28,
				6px 6px 0px 0px #AF3F28,
				7px 7px 0px 0px #AF3F28,
				8px 8px 0px 0px #AF3F28,
				9px 9px 0px 0px #AF3F28,
				10px 10px 0px 0px #AF3F28,
				11px 11px 0px 0px #AF3F28,
				12px 12px 0px 0px #AF3F28,
				13px 13px 0px 0px #AF3F28,
				14px 14px 0px 0px #AF3F28,
				15px 15px 0px 0px #AF3F28,
				16px 16px 0px 0px #AF3F28,
				17px 17px 0px 0px #AF3F28,
				18px 18px 0px 0px #AF3F28,
				19px 19px 0px 0px #AF3F28,
				20px 20px 0px 0px #AF3F28,
				21px 21px 0px 0px #AF3F28,
				22px 22px 0px 0px #AF3F28,
				23px 23px 0px 0px #AF3F28,
				24px 24px 0px 0px #AF3F28,
				25px 25px 0px 0px #AF3F28,
				26px 26px 0px 0px #AF3F28,
				27px 27px 0px 0px #AF3F28,
				28px 28px 0px 0px #AF3F28,
				29px 29px 0px 0px #AF3F28,
				30px 30px 0px 0px #AF3F28,
				31px 31px 0px 0px #AF3F28,
				32px 32px 0px 0px #AF3F28,
				33px 33px 0px 0px #AF3F28,
				34px 34px 0px 0px #AF3F28,
				35px 35px 0px 0px #AF3F28,
				36px 36px 0px 0px #AF3F28,
				37px 37px 0px 0px #AF3F28,
				38px 38px 0px 0px #AF3F28,
				39px 39px 0px 0px #AF3F28,
				40px 40px 0px 0px #AF3F28,
				41px 41px 0px 0px #AF3F28,
				42px 42px 0px 0px #AF3F28,
				43px 43px 0px 0px #AF3F28,
				44px 44px 0px 0px #AF3F28,
				45px 45px 0px 0px #AF3F28;

	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;

	overflow: hidden;
}

.robot:before {
	content: "";
	width: 375px;
	height: 18px;
	background: -webkit-linear-gradient(
		        left,
		        #0086B8 50%,
		        #0067A3 50%
		        );

	position: absolute;
	bottom: 18px;
}

.detalles-1,
.detalles-2,
.detalles-3,
.detalles-4,
.detalles-5 {
	width:...