JSFiddle - React, Tailwind, and code Playground

HTML

<div class="topo">
  <div class="logo"><img src="http://i.stack.imgur.com/uUjdf.jpg" /></div>
  <div class="menu">
    <img class="menuAbrir" src="_img/btn-menu.png" width="50px;" title="Abrir Menu" />
    <div class="menuNav">
      <a class="menuFechar"><img src="_img/btn-close.png" width="30px;" title="Abrir Menu" /></a>
      <ul class="menuPrincipal">
        <li> <a href="index.php">Home</a> </li>
        <li> <a href="media.php">Media</a> </li>
        <li> <a href="contato.php?form">Contato</a> </li>
        <li> <a href="pedido.php">Pedido</a> </li>
        <li> <a href="sobre.php">Sobre</a> </li>
      </ul>
    </div>
  </div>
</div>

CSS

@charset "utf-8";

/* CSS Document */

@import url('http://fonts.googleapis.com/css?family=Open+Sans');
* {
  font-family: 'Open Sans';
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

body {
  font-size: 12px;
  background-color: #F00;
  margin: 0 auto;
  width: 1000px;
}

img {
  border: 0;
  max-width: 100%;
}

ul {
  list-style: none;
}

a,
a:hover {
  text-decoration: none;
}

.topo {
  clear: both;
  position: relative;
  width: 100%;
  height: auto;
  border: solid 1px;
}

.logo,
.menu {
  display: inline-block;
  vertical-align: middle;
}

.logo {
  width: 30%;
  height: 88px;
}

.menu {
  width: 69.6%;
}

.corpo {
  background-color: #CCC;
  border: #000 3px solid;
  border-radius: 30px 30px 0 0;
}

.menuAbrir,
.menuFechar {
  display: none;
}

.menuPrincipal li {
  display: inline;
}

.menuPrincipal li a {
  display: inline-block;
  vertical-align: middle;
  width: 19.6%;
  height: 88.19px;
  line-height: 88.19px;
  text-align: center;
  font-size: 24px;
  color: #FFF;
  transition: background-color 1s;
}

.menuPrincipal li a:hover {
  color: #F00;
  background-color: #CCC;
}