JSFiddle - React, Tailwind, and code Playground

by Jefferson Lima

HTML

<header id="mainheader" role="banner">
			
	<nav role="navigation" id="themainmenu">
		<h1 class="esquerda"><a href="index.php">sistema</a></h1>
		<ul class="menu esquerda">
			<li><a href="#">Imóveis</a>
			  <ul>
				  <li><a href="#">Imóveis</a></li>
				  <li><a href="#">Lançamentos</a></li>
				  <li><a href="#">Condomínios/Edifícios</a></li>
				  <li><a href="#">Roteiros de visita</a></li>
				  <li><a href="#">Propostas</a></li>
				  <li><a href="#">Importação</a></li>
				  <li><a href="#">Controle de chaves</a></li>
		      </ul>
			</li>
			<li><a href="#">Clientes</a>
			  <ul>
				  <li><a href="#">Interessados</a></li>
				  <li><a href="#">Proprietários</a></li>
				  <li><a href="#">Atendimentos</a></li>
		      </ul>
			</li>
			<li><a href="#">Docs</a>
			  <ul>
				  <li><a href="#">Captação de imóvel</a></li>
				  <li><a href="#">Cap. de empreendimentos</a></li>
				  <li><a href="#">Documentos personalizados</a></li>
				  <li><a href="#">Outros documentos</a></li>
		      </ul>
			</li>
			<li><a href="#">Anúncios</a>
			  <ul>
				  <li><a href="#">Portais imobiliários</a></li>
				  <li><a href="#">Mídias impressas</a></li>
			  </ul>
			</li>
			<li><a href="#">Relatórios</a>
			  <ul>
				  <li><a href="#">Relatórios</a></li>
				  <li><a href="#">Desempenho de corretores</a></li>
				  <li><a href="#">Estatísticas</a></li>
			  </ul>
			</li>
		</ul>
		<div>
			<form action="search.php" method="get" name="search" id="header-search"  role="search">
				<select>
					<optgroup label="Imóveis">
						<option value="ImovelRef">Ref. Imóvel</option>
						<option value="ImovelProp">Proprietário</option>
						<option value="ImovelBairro">Bairro</option>
					</optgroup>
					<optgroup label="Clientes">
						<option value="ClienteRef">Ref. Cliente</option>
						<option value="ClienteNome">Nome</option>
						<option value="ClienteTelefone">Telefone</option>
						<option value="ClienteEmail">E-mail</option>
						<option...

CSS

*{margin: 0; padding: 0;}

body{
	font-family: Lucida Grande, Helvetica, Arial, sans-serif;
	font-size: 12px;
	background-color:#fff;
	/*background-color:#dfe3ee;*/
}

h1, h2, h3, a{
	color:#3b5998;
}

.esquerda {
   float:left;
}

.direita {
   float:right;
}

/**********************************************************************
 * MENU DE NAVEGAÇÃO                                                  *
 **********************************************************************/


#mainheader{
	position:fixed;
	top:0;
	padding-top:0;
	background-color:#3b5998;
	color:#fff;
	width:100%;
	height:45px;
}

#mainheader nav h1{
	border-right:1px solid #fff;
	width:90px;
	height:37px;
	text-align:center;
	padding-top:8px;
}

#mainheader nav h1 a{
	color:#fff;
	text-decoration:none;
}

#themainmenu{
	position:relative;
}

.menu{
	list-style:none;
	position:relative;
}

.menu li{
	float:left;
	min-width:45px;
	text-align:center;
	vertical-align: middle;
}

.menu li:hover{
	background-color:#132d63;
	color:#fff;
}

.menu li a{
	color:#fff;
	text-decoration:none;
	height:20px;
	padding:12px 10px;
	display:block;
}

.menu li ul{
	display:none;
}   

.menu li:hover ul {
	display:block;
	position: absolute;
}

.menu li ul li{
	border-top:1px solid #8b9dc3;
	background-color:#132d63;
	display:block;
	text-align:left;
	width:200px;

}

.menu li ul li a{
	margin:0;
	height:20px;
}

.menu li ul li a img{
	display:inline;
	padding-right:4px;
}

.menu li ul li a:hover{
	background-color:#3b5998;
}

/**********************************************************************
 * MENSAGENS                                                          *
 **********************************************************************/

.menu.direita li#mensagens{
	width:30px;
}

.nomsg{
	background-color:#3b5998;
}

.newmsg{
	background-color:#63132d;
}

/**********************************************************************
 * FORMULÁRIO DE BUSCA                                                *
...