JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menubar">
    		<li><a href="home.html">Home</a></li>
    		<li><a href="about.html">About Us</a></li>
    		<li><a href="menu.html">Menu</a></li>
    		<li><a href="location.html">Location</a></li>
    		<li><a href="gallery.html">Gallery</a></li>
    		<li><a href="contact.html">Contact Us</a></li>
    </ul>

CSS

html,  body {
   width: 100%;
   margin: 0;
}

body{
   background-color: #ffffff;

}

ul {
   position: fixed;
   top: 0;
   left: 0;
   list-style: none;
   margin: 0px;
   padding-left: 2px;
   word-spacing: 2px;
    background-color: #610000;
}

li { 
    float: left;
    word-spacing: 2px;
    padding-left: 70px;
}

#menubar {
  display: inline-block;
  width: 100%;
}

#menubar a {
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    font-family: PT sans, sans-serif;
    color: #FFDFC1;
    padding-left:0px;
}


#menubar a:hover {
    color: #092601;
    background-color: #610000;
}

#menubar .active{
    color: #092601;
}