JSFiddle - React, Tailwind, and code Playground
HTML
<div id="primary-menu">
<div class="menu">
<ul>
<li>
<a href="_blank">Link 1</a>
</li>
<li>
<a href="_blank">Link 2</a>
</li>
<li>
<a href="_blank">Link 3</a>
</li>
<li>
<a href="_blank">Link 4</a>
</li>
<li>
<a href="_blank">Link 5</a>
</li>
</ul>
</div>
</div>
CSS
/**
* Primary Menu
************************************************/
/* Wrapper for entire menu area */
#primary-menu {
background: #666666;
border-top: 1px solid #767676;
border-bottom: 1px solid #565656;
height: 40px;
width: 100%;
}
/* Wrapper for unordered list of menu items */
#primary-menu div.menu {
border-left: 1px solid #555555;
border-right: 1px solid #777777;
margin: 0 auto;
height: 40px;
width: 958px;
}
/* Menu list. */
#primary-menu ul {
height: 40px;
margin: 0;
padding: 0;
}
#primary-menu li {
display: block;
float: left;
height: 40px;
line-height: 40px;
list-style-type: none;
text-align: center;
vertical-align: middle;
}
#primary-menu li a:link,
#primary-menu li a:visited,
#primary-menu li a:active {
background: #666666;
border-left: 1px solid #777777;
border-right: 1px solid #555555;
color: #F0F0F0;
display: block;
height: 40px;
padding: 0 20px;
text-decoration: none;
width: 117px;
}
#primary-menu li a:hover {
background: #555555;
}