JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

CSS

ul.nav {
    height: 40px;
    margin: 0px;
    padding: 0px;
    list-style: none;
    background: #555555;
}
ul.nav li {
    color: #FFFFFF;
    display: inline;
    background-color: blue;
}
ul.nav li a {
    padding: 8px 10px 8px 10px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
}
ul.nav li a:hover {
    background: #660000;
    text-decoration: none;
}