JSFiddle - React, Tailwind, and code Playground
HTML
<header class="header">
<div class="container">
<div class="header-primary_container">
<div class="header_brand"> <a href="#"><img class="site_brand" /></a>
</div>
<div class="navigation-primary_right">
<div class="navigation-primary">
<nav class="navigation-primary_links"> <a href="" class="nav_icon selected">Home</a>
<a href="" class="nav_icon">Designs</a>
<a href="" class="nav_icon">About Us</a>
</nav>
</div>
</div>
</div>
</div>
</header>
<div id="sub_nav"></div>
CSS
body {
margin: 0;
padding: 0;
}
.header {
height: 55px;
background: #1f90ba;
padding: 5px 0 5px 0;
}
.container {
margin: 0 auto;
width: 940px;
}
.header_brand {
position: absolute;
}
.site_brand {
z-index: 999;
display: inline-block;
background: #000;
opacity: 0.3;
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
-ms-transition: opacity 0.5s ease-in;
transition: opacity 0.5s ease-in;
height: 51px;
width: 264px;
}
.site_brand:hover {
opacity: 1;
}
#sub_nav {
height: 20px;
background: #26afe1;
padding: 5px 0 5px 0;
}
.navigation-primary_right {
text-align: right;
position: relative;
}
.navigation-primary_links {
z-index: 1;
padding-top: 15px;
position: relative;
text-align: left;
display: inline-block;
white-space: nowrap;
}
.nav_icon {
padding: 10px;
border-radius: 5px;
font: 12px Verdana;
text-decoration: none;
color: white;
font-weight: bold;
-webkit-transition: background 0.1s ease-in;
-moz-transition: background 0.1s ease-in;
-o-transition: background 0.1s ease-in;
-ms-transition: background 0.1s ease-in;
transition: background 0.1s ease-in;
}
.nav_icon:hover {
background: #26afe1;
}
.navigation-primary {
display: inline-block;
margin-right: 20px;
position: relative;
}
.selected {
background: #26afe1;
}