JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
    <ul>
        <a href="#"><li class="active">Home</li></a>
        <a href="#"><li class="inactive">About</li></a>
        <a href="#"><li class="inactive">Products</li></a>
       <a href="#"> <li class="inactive">Product Support</li></a>
        <a href="#"><li class="inactive">Contact Us</li></a>
        <a href="#"><li class="inactive">FAQ</li></a>
    </ul>
</div>

CSS

.menu {
    height: 100px;
	float: right;
	z-index: 100;
}
			
.menu li {
    display: inline;
}
			
.menu ul {
    margin-top: 45px;
}			

.menu a {
    text-decoration : none;
	font-size: 15px;
	color: #ffffff;
}
			
.menu li:hover {
				background-color: #306;
}
			
.menu a:hover {
       background-color: #306;
}
			
			.active , .inactive {
				width: 800px;
				padding-left: 30px;
				padding-right: 30px;
				padding-top: 50px;
				padding-bottom: 34px;
			}
 
			.active {
				background-color: #306;
				color: #ffffff;
			}
 
			.inactive {
				color: #ffffff;
				background-color: #0CF;
			}