JSFiddle - React, Tailwind, and code Playground

by ncubica

HTML

<h1>Mi primer lista (bonita)</h1>    
    <ul class="lista">
    	<li>
		    <a href="#">Narciso Cuevas <span class="borrar">X</span></a>            
        </li>
    	<li>
		    <a href="#">Patricio Mercado <span class="borrar">X</span></a>	                    
        </li>
    	<li>
		    <a href="#">Narciso Cuevas <span class="borrar">X</span></a>            
        </li>
    	<li>
		    <a href="#">Patricio Mercado <span class="borrar">X</span></a>	                    
        </li>                
    <ul>

CSS

/* CSS Document */
body{
	font-size:11px;	
	font-family:Arial, Helvetica, sans-serif;
}

h1{	
 font-size:350%;
 color:#666;
 font-family:Verdana, Geneva, sans-serif;
 padding:10px;
 font-family:Georgia, "Times New Roman", Times, serif;
}

div.contenedor{
	border:1px solid red;
	width:960px;
	position:absolute;
	left:50%;
	margin-left:-480px;	
	display:none;
}

div.borrar{
	position:absolute;
	left:0px;
	top:0px;
	border:1px solid blue;	
}

ul.lista{
	width:96%;	
	margin:10px 0 0 0;
    list-style:none;
}

ul.lista li {
	margin-top:10px;
}

ul.lista li a{
	position:relative;
	display:block;
	background:#DDD;
	padding:15px;	
	font-size:20px;
	color:#000;
	text-decoration:none;
	border-radius:5px;	
}

ul.lista li a:hover{
	background:#F60;
	color:#fff;
    
	-webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -o-transition: all ease .3s;
    transition: all ease .3s;
}


ul.lista li a span.borrar{
	top:11px;	
	position:absolute;
	right:5px;
	color:#FFF;
	font-size:11px;
	background:#333;	
	padding:10px;
	border-radius:50%;
	width:10px;
	height:10px;
	text-align:center;
}

ul.lista li a:hover span.borrar{
	background:#FF3;
	color:#333;
}