JSFiddle - React, Tailwind, and code Playground

HTML

<div class="banner">
    </div>
    <div class="nav">
      <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">ORBAT</a></li>
      </ul>

    </div>

CSS

body {
    margin: 0;
    padding: 0;
    background: #ccc;
    overflow-x: hidden;
    font-family: 'PT Sans'
}

/*header*/
.banner {
    background-image: url('http://www.respectfulrevolution.org/sites/all/themes/curiouser_respect/graphics/header.png'); 
    width: 100%;
    height: 100px;
}
.nav {
    width: 100%;
    position: relative;
    background-color: #444;
    min-height: 1px;
}
.nav:after,
.nav:before{
    display: table;
    content: " ";
    clear: both;
}
.nav ul {
    list-style: none; 
}
.nav  li{
    display: inline-block;
    margin: 0;
}
.nav li a {
    border-radius: 3px;
    text-decoration: none;
    color: #fff;
    font-size: 1.250em;
    padding: 15px;
    background-color: #3f3f3f;
    transition: background 0.3s ease, color 0.3s ease;
    -webkit-transition: transition: background 0.3s ease, color 0.3s ease;
    -moz-transition: transition: background 0.3s ease, color 0.3s ease;
}
.nav li a:hover,
.nav li a:focus{
    background-color: #028482;
    transition: background 0.3s ease, color 0.3s ease;
    -webkit-transition: transition: background 0.3s ease, color 0.3s ease;
    -moz-transition: transition: background 0.3s ease, color 0.3s ease;
}
.nav li a.active{
    background-color: #028482 !important;
    transition: background 0.3s ease, color 0.3s ease;
    -webkit-transition: transition: background 0.3s ease, color 0.3s ease;
    -moz-transition: transition: background 0.3s ease, color 0.3s ease;
}
/*end of header*/