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{
text-align:center;
}

#navbar ul {
display:inline-block;
overflow: hidden;    
padding: 0;
margin: 0;
list-style-type: none;
font-size: 100%;
border-bottom: 3px solid #fff;
background: #e6e6e6;
color: #000;
}

li{
float: left;
padding: 30px;
}
   

#navbar a {
height: 25px;
text-decoration: none;
color: #009;
background: #E6e6e6;
padding: 0.2em 0.2em;
border-right: 2px solid #f90;
}