JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Desktops</a></li>
		<li><a href="#">Laptops</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

CSS

#menu {
	width: 650px;
	height: 50px;
	background-color: #212121;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
    height: 100%;
}

#menu ul > li {
	height: 100%;
	float: left;
}

#menu ul > li > a {
	display: block;
	height: 100%;
	color: #ffffff;
	font-size: 16px;
	font-family: arial;
	text-decoration: none;
	line-height: 48px;
    padding: 0 16px;
}

#menu ul > li > a:hover {
	background-color: #bc0000;
}