JSFiddle - React, Tailwind, and code Playground

HTML

<header class="site-head">
        <div class="cf wrapper">
        <div class="logo">
  		  <span class="site-logo">Vexento</span>
      	</div>
        <nav>
            <a href="#" id="menu-icon"></a>
            <ul>
                <li><a href="#">Home</a></li>
                <li>|</li>
                <li><a href="#" class="active">Music</a></li>
                <li>|</li>
                <li><a href="#">Videos</a></li>
                <li>|</li>                
                <li><a href="#">Social</a></li>
                <li>|</li>                
                <li><a href="#">Bio</a></li>             
            </ul>
        </nav>
        </div>
    </header>

CSS

.site-head {position: relative; display: table; width: 100%; padding-top: 50px; background: #203041 no-repeat center center; background-size: cover;}

.wrapper { width: 100%; max-width: 1240px; margin: 0 auto; }

a {color: #FFFFFF; text-decoration: none; font-weight: bold; }
a:hover {color: #cc3727;}
header {background: #fff; width: 100%; height: 180px; position: fixed; top: 0; left: 0; z-index: 100; background: #203041 no-repeat center center; background-size: cover;}
 nav {poistion: absolute; right: 0; bottom: 0; float: right;}
#menu-icon {display: hidden; width: 40px; height: 40px; background: #4C8FEC url(images/menu-icon.png) center;} 
a:hover#menu-icon { background-color: #444; border-radius: 4px 4px 0 0;}  
ul { list-style: none; padding: 0; } 
li {display: block;float: left;padding: 10px; font-family: 'Proxima Nova Light', 'Open Sans', sans-serif; color: #FFFFFF;}
.active {color: #cc3727;}