JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
  <nav class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Pizzas Tradicionais</a></li>
      <li><a href="#">Pizzas Especiais</a></li>
      <li><a href="#">Pizzas Premium</a></li>
      <li><a href="#">Pizzas Integrais</a></li>
      <li><a href="#">Pizzas Doces</a></li>
      <li><a href="#">Bebidas</a></li>
    </ul>
  </nav>
</div>

CSS

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300);
html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color: #DDDDDD;
    font-family: 'Roboto Condensed', sans-serif;
}
#header {
    background-color: #33b5e5;
    height: 59px;
}
#content {
    height: 600px;
    width: 100%;
}
#footer {
    height: 120px;
    background-color: #33b5e5;
}
.menu ul {
    list-style: none;
    padding: 0px 5px;
    margin:0
}
.menu ul li {
    display: inline;
}
.menu ul li a {
    display: inline-block;
    font-size: 14pt;
    font-weight: 300;
    padding: 17px 5px;
    color: white;
    text-decoration: none;
}
.menu ul li a:hover {
    background-color: #0099cc;
    color: #ddd;
}