JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div id="statement">
   
   <div id="navbar">
      <ul>
         <li><a href="#intro">Intro</a></li>
         <li><a href="#bio">Bio</a></li>
         <li><a href="#issues">Issues</a></li>
      </ul> 
   </div>

</div>

</body>
</html>

CSS

#navbar ul
{
    list-style-type: none;
    display: table;
}
#navbar li
{
 
    float: left;
    width: 200px;
    height: 50px;
    text-align: center;
    background-color: #f0e68c;;
}
#navbar li:hover
{
    background-color: black;
}

#navbar li a
{
    display: inline-block;
    text-decoration: none;
    color: black;
    line-height: 50px; /*Make the line height same as height of li tag*/
}
/*Add style for anchor*/
#navbar li:hover a{
    color:#f0e68c;
}