JSFiddle - React, Tailwind, and code Playground

by hayder

HTML

<div id="contenedor">
	<div id="nombre">Hayder Espinoza</div>
	<div class="caja caja-analisis">
		<div class="tornillo analisis">
			<div class="tema">An&aacute;lisis</div>
			<div class="salientes uno">&nbsp;</div>
			<div class="salientes dos">&nbsp;</div>
			<div class="salientes tres">&nbsp;</div>
			<div class="salientes cuatro">&nbsp;</div>
			<div class="salientes cinco">&nbsp;</div>
			<div class="salientes seis"> &nbsp;</div>
		</div>
	</div>
	<div class="caja caja-disenio">
		<div class="tornillo disenio">
			<div class="tema">Dise&ntilde;o</div>
			<div class="salientes uno">&nbsp;</div>
			<div class="salientes dos">&nbsp;</div>
			<div class="salientes tres">&nbsp;</div>
			<div class="salientes cuatro">&nbsp;</div>
			<div class="salientes cinco">&nbsp;</div>
			<div class="salientes seis"> &nbsp;</div>
		</div>
	</div>
	<div class="caja caja-programacion">
		<div class="tornillo programacion">
			<div class="tema">Programar</div>
			<div class="salientes uno">&nbsp;</div>
			<div class="salientes dos">&nbsp;</div>
			<div class="salientes tres">&nbsp;</div>
			<div class="salientes cuatro">&nbsp;</div>
			<div class="salientes cinco">&nbsp;</div>
			<div class="salientes seis"> &nbsp;</div>
		</div>
	</div>
	<div class="caja caja-resultado">
		<div class="tornillo resultado">
			<div class="tema">Resultado</div>
			<div class="salientes uno">&nbsp;</div>
			<div class="salientes dos">&nbsp;</div>
			<div class="salientes tres">&nbsp;</div>
			<div class="salientes cuatro">&nbsp;</div>
			<div class="salientes cinco">&nbsp;</div>
			<div class="salientes seis"> &nbsp;</div>
		</div>
	</div>
</div>

CSS

*{
	padding:0;
	margin:0;
	font-family:'Comic Sans MS' ;
}
#contenedor{
	width:400px;
	height: 400px;
	background-color:#ccc;
	position:relative;
	margin:auto;
	margin-top:40px;
}
#nombre{
		width:180px;
		height: 20px;
		padding:0.3em;
		font-weight: bold;
		font-size:140%;
		color:#c9c9c9;
		text-shadow: 1px 1px #fff, -1px -1px #333;
		position:absolute;
		top:10px;
		left:60px;
}
.tornillo{
	width:100px;
	height:100px;
	background-color:#333;
	-webkit-border-radius:50%;
	position:absolute;
}
.tema{
	font-size:110%;
	color:#fff;
	width:75px;
	height: 20px;
	padding:0 10px;
	text-align:center;
	position:absolute;
	left:0px;
	top:36px;
	font-weight:bold;
}
.salientes{
	width:13px;
	height: 26px;
	background-color:#333;
	position:absolute;
}

.salientes:after{
	content:"";
	border-top:13px solid transparent;
	border-right:3px solid #333;
	border-bottom:13px solid #333;
	border-left:3px solid transparent;
	position:absolute;
	left:-6px;	
}
.salientes:before{
	content:"";
	border-top:13px solid transparent;
	border-right:3px solid transparent;
	border-bottom:13px solid #333;
	border-left:3px solid #333;
	position:absolute;
	right:-6px;

}
.uno{
	-webkit-transform:rotate(-30deg);
	top:-12px;
	left:15px;
}
.dos{
	-webkit-transform:rotate(30deg);
	top:-12px;
	right:15px;
}
.tres{
	-webkit-transform:rotate(-90deg);
	top:35px;
	left:-13px;
}
.cuatro{
	-webkit-transform:rotate(90deg);
	top:35px;
	right:-13px;	

}
.cinco{
	-webkit-transform:rotate(-150deg);
	bottom:-12px;
	left:15px;	
}
.seis{
	-webkit-transform:rotate(150deg);
	bottom:-12px;
	right:15px;	
}
.caja{
	width:100px;
	height: 100px;
	position:absolute;
}
.caja-analisis{
	right:35px;
	top:35px;
}
.caja-disenio{
	right:138px;
	top:55px;
	-webkit-transform:scale(0.7,0.7);	
}
.caja-programacion{
	top:125px;
	left:104px;
	-webkit-transform:scale(0.8,0.8);
}
.caja-resultado{
	right:113px;
	bottom:82px;
	-webkit-transform:scale(1.2,1.2);
}
.analisis, .programacion{
	-webkit-animation:10s rotar-izquierda infinite...