JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
    </ul>
</nav>

CSS

nav {
    margin: 0;
	padding: 0;
	width: 500px;
	height: 100px;
	background: lightblue;
    line-height: 100px;
    font-size:0;
    text-align: center;
}

ul {
    display:inline-block;
    vertical-align: middle;
	margin: 0;
	padding: 0;
	background: lightblue;
	list-style: none;
    line-height: 2.2;
    font-size:16px;
}
ul li {
    display: inline;
}

ul li a {
    padding: 5px 15px;
    margin: 0 10px;
    background: lightgreen;
}