JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu-layer">
     <ul class="menu">
      <li><a href="#">HUNDLE</a></li>
      <li><a href="#">ONEDLE</a></li>
      <li><a href="#">SECOND</a></li>
      <li><a href="#">NIGHT</a></li>
     </ul>
	</div>

CSS

.menu-layer {
	height: 40px;
	width: 100%;
	max-width: 1200px;
	background: #575c62;
}
.menu {
 list-style:none;
 margin:0;
}
.menu li{
 float: left;
 width: 25%;
 text-align: center;
}
.menu li a{
 display: block;
 padding: 10px 0;
 text-decoration: none;
 font-weight: bold;
 font-size: 16px;
 color: white;
}