JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div id="navbar">
<ul>
<li><a href="...">1</a></li>
<li><a href="...">2</a></li>
<li><a href="...">3</a></li>
<li><a href="...">4</a></li>
</ul>
</div>

CSS

#navbar ul {
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
font-size: 100%;
text-align: center;
border-bottom: 3px solid #fff;
background: #e6e6e6;
color: #000;
}
#navbar a {
float: left;
width: 11.6em;
height: 25px;
text-decoration: none;
color: #009;
background: #E6e6e6;
padding: 0.2em 0.2em;
border-right: 2px solid #f90;
}

li{
display: inline-block;
overflow: hidden;    
}