JSFiddle - React, Tailwind, and code Playground

by Virneto

HTML

<div id="nav">
         <ul>   
      <li><a href="#"> <spam id="blable">Webmail</spam> </a></li>
    <li><a href="#"> Contactos </a></li>
             <li> <img src="image/logo.JPG"/></li>
                 <li><a href="#"> Multimedia </a></li>
                 <li><a href="#"> Documentos </a></li>
         </ul>
</div>

CSS

#blable {padding-left:45px;} 
#nav { Width: 100%; background:#CCC; Margin:0px; Float:left;}
 #nav ul { margin: 0; padding: 0; list-style: none; width:100%; float:left; }
 #nav ul li { float: left; font: 16px arial; }
 #nav ul li a { color:#888; text-decoration:none; padding:15px; display:block; }
 #nav ul li:hover {background: #666}
 #nav ul li .Webmail { background: url(image/1-email.png) no-repeat center; float: left; width: 100%; padding: 30px 0; margin-bottom: 15px; }
 #nav ul li .Contactos { background: url(image/2-contactos.png) no-repeat center; float: left; width: 100%; padding: 30px 0; margin-bottom: 15px; }
 #nav ul li .Multimedia { background: url(); float: left; width: 100%; }
 #nav ul li .Documentos { background: url(); float: left; width: 100%; }