JSFiddle - React, Tailwind, and code Playground
HTML
<nav>
<div class="wrapper">
<div class="grid one-third">
<div class="logo">
<img src="assets/logo.png" alt="Something Big">
</div>
</div>
<div class="grid two-thirds menu">
<ul>
<li><a name="#home">Home</a>
</li>
<li><a name="#expertise">Our Expertise</a>
</li>
</ul>
</div>
</div>
</nav>
CSS
nav {
position:fixed;
z-index:10;
width:100%;
background-color:#f1f1f1;
min-height:50px;
bottom:0;
}
nav .menu {
text-align: right;
}
nav ul {
text-align: right;
}
nav ul li {
list-style-type: none;
display:inline-block;
margin-left:5%;
line-height:50px;
}
.grid {
display:inline-block;
box-sizing:border-box;
}
.grid.half {
width:50%;
}
.grid.one-third {
width:33%
}
.grid.two-thirds {
width:66%
}
.grid.full {
width:100%;
}
.wrapper {
width:90%;
max-width:1200px
}