JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
	<div class="intWrapper"> 
		<ul class="mainMenu">	
			<li><a href="one.htm" style='background-color:red'>ITEM ONE</a>
			</li><li><a href="two.htm">ITEM TWO</a>
			</li><li><a href="three.htm" style='background-color:red'>ITEM THREE</a>		
			</li>	
		</ul></div>
	</div>
</div>

CSS

.wrapper {
	width: 100%;
	background-color:#80B5EB;
	text-align: center;
	}
.intWrapper {
	display: inline-block;
	}
.mainMenu {
    padding: 0;
    min-height: 40px;
	margin:auto;
	}
ul {
    list-style-type: none;
	}
ul li {
    float: left;
    font-size: 15px;
    line-height: 40px;
	}
ul li A {
    display: block;
	color: white;
    font-weight: bold;
    font-family: Arial;
    text-decoration: none;
    min-height: 40px;
    padding: 0 36px;
	}