JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav-box">
    <nav>
        <ul>
            <li><a href="#">foo</a></li>
            <li><a href="#">bar</a></li>
        </ul>
    </nav>
</div>
<section>foo</section>
<p>bar</p>
<h2>fubar</h2>
<div>blah blah blah </div>

CSS

body{
    margin:0;
}
.nav-box {
    height: 57px;
}
nav{
    position:fixed;
    top:0;
    width:100%;
    border:1px solid black;
}

nav ul li{
    display:inline;
}

nav ul li a{
    text-decoration:none;
    color:black;
    font-size:20px;
    -webkit-transition:all .5s;
    padding:5px;
}

nav ul li a:hover{
    background:black;
    color:white;
}