JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<header>
<div id="logo"></div>
<nav>
<ul>
<li><a href="#">Tours & Prices</a></li>
<li><a href="#">Standard Flights</a></li>
<li><a href="#">Meet the Staff</a></li>
<li><a href="#">Charters</a></li>
</ul>
</nav>
</header>
</div>
CSS
.container {
width: 960px;
margin:0 auto;
background-color: blue;
}
header {
height: 100px;
background-color: #001D5D;
position: relative;
overflow:hidden;
}
#logo {
height:110px;
width:100px;
z-index:10;
top:0px;
position: absolute;
overflow: visible;
background-color:red;
}
nav {
background-color:#1CCEAE;
margin-top:63px;
}
nav ul {
width:100%;
line-height: 37px;
text-align:right;
background-color:#1CCEAE;
}
ul li {
display: inline-block;
margin-right: 20px;
}
ul li a {
text-decoration: none;
font-size: 1em;
color:white;
}