JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li><a href="#">Services</a></li>
    <li><a href="#">Doctors</a></li>
    <li><a href="#">Hospitals</a></li>
    <li><a href="#">Roasted Chicken</a></li>
    <li class="last"><a href="#">Customer Service</a></li>
</ul>

CSS

#menu {
    width: 600px;
}

#menu li {
    float: left;
}

#menu li a {
    display: block;
    padding: 6px 14px 7px;
    color: #fefefe;
    background-color: #333;
    text-decoration: none;
    float: left;
}

#menu li a:hover {
    background-color: #666;
}

#menu li.last {
    float: none;
}

#menu li.last a {
    text-align: center;
    float: none;
}