JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header>
      <ul>
        <li>
            <ul>
              <li class="logo"> <a href="#"><img src="#" alt="logo"/></a> </li>
              <li class="menu"> <a href="#">blablabla</a> </li>
              <li class="menu"> <a href="#">blablabla</a> </li>
              <li class="menu"> <a href="#">blablabla</a> </li>
              <li class="menu"> <a href="#">blablabla</a> </li>
              <li class="menu"> <a href="#">blablabla</a> </li>
            </ul>
        </li>
        <li><a href="#">blablabla</a></li>
        <li><a href="#">blablabla</a></li>
        <li><a href="#">blablabla</a></li>
      </ul>
    </header>
    <main>
      <article>
      </article>
    </main>
  </body>

CSS

@import url(https://fonts.googleapis.com/css?family=Oxygen+Mono|Special+Elite|Luckiest+Guy|Slabo+27px|Open+Sans);

html, body {
  margin:0;
  padding:0;
}
header {
  top: 0;
  left: 0;
  background-color: #333;
  width:100%;
}
header > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-left: 32px;
    background-color: #333;
    float: left;
    z-index: 2;
    position:relative;
}
header ul ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-left: 32px;
    background-color: #333;
  top:100%;
  position:absolute;
  width:120px;
}
header:after{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
header li {
  float: left;
  width:120px;
}

header li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Oxygen Mono';
}

header li a:hover {
    background-color: #111;
}

header li.active {
    background-color: #4CAF50;
}