JSFiddle - React, Tailwind, and code Playground

by rohitazad

HTML

<div class="menu">
  <div class="search">
    <form id="form1" name="form1" method="post" action="">
      <label><span>
        <input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Pesquisar..." />
        </span>
        <input name="b" type="image" src="images/search.gif" class="button" />
      </label>
    </form>
  </div>
  <ul>
    <li><a href="index.html" class="active">HOME</a></li>
    <li><a href="quemsomos.html">QUEM SOMOS</a></li>
    <li><a href="index.html">COZINHAS</a></li>
    <li><a href="#">DIVERSOS</a></li>
    <li><a href="index.html">PRODUTOS</a></li>
    <li><a href="contact.html">CONTACTOS</a></li>
  </ul>
  <div class="clr"></div>
</div>

CSS

.menu
{
    background:#5d5d5d;
    margin:0 auto;
    padding:0;
    width:942px;
}

.menu ul
{
    border:0;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    text-align:left;
}

.menu ul li
{
    border:0;
    float:left;
    margin:0;
    padding:0 5px 0 0;
}

.menu ul li a
{
    color:#fff;
    float:left;
    font-family:Verdana, Helvetica, Arial, sans-serif;
    font-size:11px;
    margin:0;
    padding:15px;
    text-decoration:none;
}

.menu ul li a:hover
{
    background:#b57800;
}

.menu ul li a.active
{
    background:#1caedd;
}

.menu ul li ul,.menu ul li ul a
{
    font-family:Verdana, Helvetica, Arial, sans-serif;
    font-size:11px;
}