JSFiddle - React, Tailwind, and code Playground

by hayder

HTML

<div class="contenedor">
		<div id="nombre">Hayder Espinoza</div>

		<div id="cuerpo">

			<div class="antena ant_left"></div>
			<div class="antena ant_right"></div>

			<div class="ojos ojo_left"></div>
			<div class="ojos ojo_right"></div>

			<div class="mejilla mejilla_left"></div>
			<div class="mejilla mejilla_right"></div>

			<div class="pico_loma"></div>
			<div class="pico"></div>

			<div class="brazo brazo_left"></div>
			<div class="brazo brazo_right"></div>

		</div>

		<div class="cola">&nbsp;</div>


		<div class="pie pie_left">
			<div class="dedo">&nbsp;</div>
		</div>
		
		<div class="pie pie_right">
			<div class="dedo ">&nbsp;</div>
		</div>
	</div>

CSS

*{
		margin:0;
		padding:0;
		font-family: 'Berlin Sans FB';
	}
	.contenedor{
		background-color:rgba(0, 149, 162, 0.3);
		width:300px;
		height:300px;
		margin:auto;
		margin-top:50px;
		-webkit-border-radius:20%;
		position:relative;
		z-index:-2;
	}

	#nombre{
		width:180px;
		height: 20px;
		padding:0.3em;
		font-weight: bold;
		font-size:140%;
		color:rgb(151, 211, 208);
		text-shadow: 1px 1px #fff, -1px -1px #333;
		position:absolute;
		top:10px;
		left:60px;
	}

	#cuerpo{
		width: 100px;
		height: 170px;
		background-color: rgb(0, 170, 153);
		-webkit-border-radius:30px 35px 0 0;
		border:4px solid #000;
		position:absolute;
		bottom:50px;
		left: 95px;

	}

	.antena{

		width:4px;
		height: 30px;
		background-color:#000;
		position:absolute;
		z-index: 5;
		-webkit-border-radius:5px;
	}

	.ant_right{
		
		left:55px;
		top:-30px;
		-webkit-transform:rotate(30deg);
	}

	.ant_left{

		height:15px;
		left:45px;
		top:-15px;
		-webkit-transform:rotate(-30deg);	
	}

	.ojos{

		width:18px;
		height:25px;
		background-color:#000;
		-webkit-border-radius:50%;
		position:absolute;
	}
	.ojo_left{
		
		left:17px;
		top:30px;
	}
	.ojo_right{

		right:17px;
		top:30px;

	}
	.ojo_left:after, .ojo_right:after{
		content: " ";
		width:9px;
		height: 13px;
		background-color:#fff;
		-webkit-border-radius:50%;	
		position:absolute;
		left:4px;
		top:1px;
	}

	.mejilla{
		width:15px;
		height: 15px;
		background-color: rgba(218, 52, 204, 0.41);
		-webkit-border-radius:50%;
		position:absolute;
    	
	}
	.mejilla_left{

    	top:53px;
    	left:5px;
	}
	.mejilla_right{

    	top:53px;
    	right:5px;	

	}
	.pico{
		width:120px;
		height:16px ;
		background-color: #fff;
		background-color:rgb(255, 163, 47);	
		-webkit-border-radius:10px;
		border:3px solid #000;
		position:absolute;
		left:-14px;
		top:70px;
	}
	.pico:after{
		content:" ";
		width: 65px;
		height:13px;
		background-color:rgb(255, 163, 47);	
		-webkit-border-radius:0 0 15px 15px;
		border-bottom:3px solid...