JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

HTML

<div id="container">
<nav>
  <ul>
    <li><img src="images/small_logo.png"/></li>
    <li><a href="./home.html">Home</a></li>
    <li><a href="./pizzaria.html">A pizzaria</a></li>
    <li><a href="./horarios_precos.html">Horários e preços</a></li>
    <li><a href="./sabores.html">Sabores</a> </li>
    <li><a href="./bebidas.html">Bebidas</a></li>
    <li><a href="./contato.html" class="last">Contato</a></li>
  </ul>
</nav>
<section>
  <div class="middle"> <br/>
    <center>
      <img src="./images/logo.png"/>
    </center>
    <br/>
    Em um ambiente confortável e aconchegante, a Pizzaria Bologna traz a você os melhores e mais variados sabores da mais deliciosa pizza italiana. Por aqui, priorizamos o atendimento de qualidade, o bem-estar e um sabor único. Nossas pizzas combinam sabores aprovados por pizzaiolos apaixonados com ingredientes selecionados cuidadosamente por uma nutricionista experiente, trazendo uma experiência gastronômica única.</div>
</section>
</div>
<footer>Pizzaria Bologna | Avenida Presidente Wenceslau Braz, 1172 - Guaira. Curitiba - PR | (41)3213-5200</footer>

CSS

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
html, body {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    background-color: #DDD;
}
#container { height: auto; min-height: 100%; }
h2 {
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 20px;
}
section {
    width: 100%;
    overflow: auto;
    font-size: 16px;
    padding-bottom: 60px;
}
.middle {
    width: 1200px;
    margin: auto;
    text-align: justify;
}
footer {
    clear: both;
    padding-top: 20px;
    background-color: #a20e06;
    width: 100%;
    height: 40px;
    color: white;
    text-align: center;
    font-size: 16px;
    position: relative;
    margin-top: -60px;
}
nav {
    background-color: #06a20e;
    height: 80px;
    width: 100%;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
}
nav a {
    background: transparent;
    color: white;
    display: block;
    font: 20px/80px 'Open Sans';
    padding: 0 25px;
    border-right: solid 1px #07b30f;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
nav a.last {
    border-right: none;
}
nav li:hover a {
    background: #07b30f;
}
iframe {
    width: 100%;
    height: 400px;
    border: 0;
    float: right;
}
#gallery {
    width: 990px;
    margin: auto;
}
#gallery img {
    border: 2px solid white;
    box-shadow: 0 0 5px #333;
    margin: 1px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
#gallery img:hover {
    border: 2px solid #06a20e;
}