JSFiddle - React, Tailwind, and code Playground

by laurean0

CSS

#side .m6ZEb {
	display: none;
}
/********* FONDO CELESTE *********/
._1FKgS {
    background-color: #00A4BF;
}
/********* LOGO AVANZAR *********/
#logoSide {
	background:url(https://circuitos.info/_theme/_img/logo-avanzar-117x59-2.png) no-repeat;
	width:117px;
	height:59px;
	position:absolute;
	left:70px;
	top:0;
}
/********* CONTENEDOR *********/
#enChuladaBar{
    background-color: #FBFBFB;
	border-bottom:1px solid #D7D0CA;
	border-right:1px solid #D7D0CA;
	border-left:1px solid #DBDBDB;
	border-top:1px solid #fff;
	height:48px;
	display:block;
	position:relative;
	z-index:99999;
}
/********* PERFIL *********/
.perfilWS{
	width: 66px;
	height: 48px;
	border-right:1px solid #DED6CE;
	padding:0 8px;
	float:left;
}
.perfilWS a{
	background: url(https://circuitos.info/_theme/_img/perfil.png) no-repeat;
	width: 66px;
	height: 48px;
	display:block;
	text-decoration:none;
	text-indent:-9999px;
}

.perfilWS.OkVerificado a{
	background-position:0 0;
}
.perfilWS.OkVerificado a:hover{
	background-position:0 -100px;
}


.perfilWS.NoVerificado a{
	background-position:0 -200px;
}
.perfilWS.NoVerificado a:hover{
	background-position:0 -300px;
}

/********* GUARDAR TXT *********/
.guardarWS{
	width: 53px;
	height: 48px;
	border-right:1px solid #DED6CE;
	padding:0 8px;
	float:left;
}
.guardarWS .BtGuardar{
	background: url(https://circuitos.info/_theme/_img/guardar.png) no-repeat;
	width: 53px;
	height: 48px;
	display:block;
	text-decoration:none;
	text-indent:-9999px;
	background-position:0 -200px;
}
.guardarWS .BtGuardar:hover, .guardarWS.activo .BtGuardar:hover{
	background-position:0 0;
	cursor:pointer;
}
.guardarWS.activo .BtGuardar{
	background-position:0 -100px;
	cursor:pointer;
}

/********* ETIQUETA *********/
#etiquetasWS{
	height: 32px;
	padding:16px 0 0 16px;
	float:left;
	font-size:11px;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
}
.etiqueta{
	background-color:#999;
	-webkit-border-radius: 4px;
	margin-right:6px;
	padding:3px...