JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<div id="menu">
	<ul>
		<li><a href="#" accesskey="1" title="">Home</a></li>
		<li><a href="#" accesskey="2" title="">About Us</a></li>
		<li><a href="#" accesskey="3" title="">Products</a></li>
		<li><a href="#" accesskey="4" title="">Services</a></li>
	</ul>
</div>

CSS

#menu {
         width: 600px;
         height: 130px;
         margin: 0px auto;
}
#menu ul {
         margin: 0px;
         padding: 0px;
         list-style: none;
}
#menu li {
         display: inline;
}
#menu a {
         display: block;
         float: left;
         width: 150px;
         padding: 55px 0px;
         text-align: center;
         text-decoration: none;
         font-weight: bold;
         background: #EEEEEE;
}
#menu a:hover {
         background: #CCCCCC;
}