JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <div id="top"></div>
  <div id="menubar">
    <div id="logo"></div>
    <nav>
      <ul>
        <li><a href="#">Articles</a></li>
        <li><a href="#">Images</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Disclaimer</a></li>
      </ul>
    </nav>
    <div id="search"></div>
  </div>
</header>
<main role="main">
  <section>
    <p>Content...</p>
  </section>
</main>

CSS

* { margin: 0; padding: 0 }

body { background-color: #dfe3e5; }

header div#top {
    height: 22px;
    /*background-image: url('../img/colorbar.png');
    background-position: top left;
    background-repeat: repeat-x;*/
    background-color: gray;
}
header div#menubar {
    background-color: #1c2227;
    display: flex;
    justify-content: space-between;
}
header div#menubar div#logo {
    width: 80px;
    height: 80px;
    background-color: orange;
}
header div#menubar nav {
    display: table;
    text-align: center;
    width: 1415px;
    background-color: darkred;
}
header div#menubar nav ul li {
    display: inline-block;
    margin-left: -4px;
    list-style-type: none;
    line-height: 80px;
    text-align: center;
}
header div#menubar nav ul li a {
    outline: 0;
    display: block;
    text-transform: uppercase;
    padding: 0px 20px;
    font-size: 1.1em;
    font-family: 'Raleway', "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #eee;
    text-decoration: none;
}
header div#menubar nav ul li a:hover {
    color: #000;
    background-color: orange;
}
header div#menubar div#search {
    width: 80px;
    height: 80px;
    background-color: orange;
}

main {
    margin: 0 auto;
    width: 1355px;
    background-color: #fff;
    padding: 20px 30px;
}