JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navbar">
			<ul>
				<li class="active"><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Servies</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>

CSS

/*navbar css*/
.navbar{
	width: 520px;
	height: 37px;
	text-align: right;
	text-shadow:3px 2px 3px #321;
	background-color: #666633;
	border-radius: 5px;
}
.navbar ul{
	list-style-type: none;
	height: auto;
	padding: 8px 0px;
	margin: 0px;
}
.navbar li{
	display: inline;
	padding: 20px;
	font-family: 'Play', sans-serif;
	font-size: 18px;
	font-weight: bold;
}
.navbar a{
	text-decoration: none;
	color: #999966;
	padding: 8px 8px 8px 8px;
}

.navbar a:hover, .navbar li.active{
    padding: 8px;
	color: #CCCCB2;
	background-color: #999966;
}