JSFiddle - React, Tailwind, and code Playground

HTML

<body>
 <div >
  <ul id="button">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">F.A.Q</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
 </div>
</body>

CSS

#button {
	padding: 0;
}
#button li {
	display: inline;
}
#button li a {
	font-family: Arial;
	font-size:11px;
	text-decoration: none;
	float:left;
	padding: 10px;
	background-color: #2175bc;
	color: #fff;
}
#button li a:hover {
	background-color: #2586d7;
	margin-top:-2px;
	padding-bottom:12px;
}