JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
  
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

CSS

#header .menu
{
    display: inline;
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%
position: relative;
    text-align: center;
text-transform:uppercase;
}

#header .menu li { display: inline; float:left; }

#header .menu li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
font-family: Helvetica;
}

#header ul li a:hover
{
color: Yellow;
background-color: #000;
}