JSFiddle - React, Tailwind, and code Playground

by Vladymyr Shevchuk

HTML

<div id="menu">
    <ul id="menu-list"><!--
    --><li id="home"><a href="#">Home</a></li><!--
    --><li id="townoffice"><a href="#">Town Office</a></li><!--
    --><li id="busines"><a href="#">Business</a></li><!--
    --><li id="residents"><a href="#">Residents</a></li><!--
    --><li id="tourists"><a href="#">Tourists</a></li><!--
   </ul>
</div>

CSS

#menu {
    outline: 1px solid red;
    overflow: hidden;
}

#menu ul {
    padding: 0 ;
    text-align: center;
    white-space: nowrap;
}   
#menu-list li {
height: 45px;
width: 20%;
list-style: none;
background-color: #f69b58;
display: inline-block;
text-align: center;
font-family: arial;
font-size: 14px;
}
#menu-list li:not(:last-child) {
    margin-right: 2px;
}
#menu-list li a {
    display: block;
    padding: 13px;
    color: #ffffff;
    text-decoration: none;
}

#menu-list li:active{
color:black;
background-color: #3EAEE9;
}

#menu-list li:hover{
    background:#3eaee9;
}

#menu-list  li.current{
    background-image: -webkit-linear-gradient(top,rgb(7, 80, 158),rgb(6, 101, 243));
    background-color: #3EAEE9;
}