JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">About</a></li>
    <li><a href="index.html">Service</a></li>
    <li><a href="index.html">Blog</a></li>
</ul>

CSS

ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    
    background: #ccc;
    text-align: center
}
ul li {
    display: inline-block;
    *display: inline;
    zoom: 1;
    
    line-height: 50px;
    margin-left: 5px;
    margin-right: 5px;
    background: #eee
}
ul li a {
    display: block;
    height: 46px;
    padding-left: 5px;
    padding-right: 5px;
}