JSFiddle - React, Tailwind, and code Playground
HTML
<header>
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li class="logo"></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
CSS
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body{
background-color: #ebebeb;
}
nav {
width: 960px;
margin: 0 auto;
}
ul{
display: inline-table;
list-style-type: none;
text-align: center;
}
li{
height: 120px;
float: left;
text-align: center;
line-height: 120px;
margin-right: 30px;
}
.logo {
height: 130px;
width: 164px;
background:url(http://samaradionne.com/img/typeBlack.png) no-repeat;
}
section.stretch{
float: left;
height: 1500px;
width: 100%;
}
header{
width: 100%;
background: #fff;
border-bottom: 1px solid #aaaaaa;
position: fixed;
z-index: 10;
text-align: center;
}
header a{
color: #969696;
text-decoration: none;
font-family: sans-serif;
text-transform: uppercase;
}