JSFiddle - React, Tailwind, and code Playground

by Agony

HTML

<div id="nav">
<ul>
<li><a href="">House</a></li>
<li><a href="">Baby</a></li>
<li><a href="">More</a></li>
<li><a href="">About</a></li>
</ul>
</div>

CSS

#nav {
background-color: #2322ff;
height: 3em;
}
#nav ul {
display: inline-block; 
list-style:none;
margin: 0 auto;     
} 
#nav ul li {
display: inline-block; 
font-weight: normal;
text-transform: uppercase;
}

#nav ul li a {     
display: inline-block;   
padding: .5em;    
border: 1px solid #ba89a8; 
border-radius: .5em;  
margin: .25em; 
}