JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
<div id="nav2">
  <ul>        
    <li class="email"><a href="#"> E-mail </a></li>
    <li class="contactos"><a href="#"> Contatos </a></li>
    <li class="multimedia"><a href="#"> Multimédia </a></li>
    <li class="documentos"><a href="#"> Documentos </a></li>
  </ul>
</div>
</div>



</div>
<span class="logo"><img src="image/Logo.png" height="94"/></span>

CSS

body { background:#CCC ;}
*{
padding:0;
margin:0;	
}
/* Barra Menu */

/* Barra Branca */
#nav {border-radius: 10px; height:115px; width: 100%; background:#FFF; margin:0; Float:left;}
/* Barra Azul */
#nav2 {border-radius: 5px; height:45px; width: 100%; background:#00C; margin:0; Float:left;}




#nav ul {
	margin: 0;
	padding: 0px;
	list-style: none;
	width: 100%;
	float: left;
	height: 100px;
}
#nav ul li {
	float: left;
	font: 16px arial;
	width: 132px;
	line-height: 65px;
}
#nav ul li.logo > img {padding-left: 40px}
#nav ul li a { color:#888; text-decoration:none; display:block; height: 100%; background: no-repeat 5px center; padding-left: 40px;}

#nav ul li.email a {background-image: url(image/Email.png); }
.email {
	position: absolute;
	left: 100px;
	top: -10px;
}

#nav ul li.contactos a {background-image:url(https://cdn1.iconfinder.com/data/icons/Futurosoft%20Icons%200.5.2/32x32/actions/kontact_contacts.png); }
.contactos {
	position: absolute;
	left: 300px;
	top: -10px;
}

#nav ul li.multimedia a {background-image: url(https://cdn3.iconfinder.com/data/icons/tango-icon-library/48/audio-x-generic-24.png); }
.multimedia {
	position: absolute;
	left: 800px;
	top: -10px;
}

#nav ul li.documentos a {background-image: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698381-icon-72-documents-24.png); }
.documentos {
	position: absolute;
	left: 1000px;
	top: -10px;
}

#nav ul li:hover a {background-color: #069; color: #fff; width: 90px; height: 55px;}

/* LOGO */
.logo {
	position: absolute;
	left: 516px;
	top: 18px;
}