JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menuNav">
    <ul id="menuNav-ul">
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
    </ul>
</div>

CSS

#menuNav {
	margin: 0 auto;
	width: 1000px;
}

#menuNav-ul {
	background: lightgrey;
	list-style-type: none;
	padding: 0;
	margin: 0;
	border-bottom: 2px solid darkgrey;
    font-size:0;
}

#menuNav-ul li {
	display: inline-block;
	border-right: 1px solid #bfbfbf;	
	margin: 0px;
	padding: 0px;
    font-size: 18px;
}

#menuNav-ul li:first-of-type {
	border-left: 1px solid #bfbfbf;
}

#menuNav-ul li a {
	display: block;
	margin: 0px;
	padding: 10px 18px;
	font-family: Helvetica;
	/*font-size: 1em;*/
	text-transform: uppercase;
	color: #929292;
	text-decoration: none;
	font-weight: bold;
	padding-bottom: 12px;	
}

#menuNav-ul li a:hover {
	background: white;
	color: #6c6c6c;
	border-bottom: 2px solid #e57511;
	padding-bottom: 10px;
}