JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Blog</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">Our history</a></li>
      <li><a href="">Contacts</a></li>
    </ul>
  </div>

CSS

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  background-color: #fff;
  overflow: hidden;
}

.menu{
  display: block;
  background-color: #000;
  position: relative;
}
.menu ul{
display: inline-block;
padding: 5px 15px 5px 15px;
margin: 0 auto;
width: 100%;
}
.menu li{
display: inline;
 width: 20%;
 position: relative;
 float: left;
 text-align: center;
}
.menu li a{
color: #fff;
text-decoration: none;
text-transform: capitalize;
}
.menu li:nth-child(1){
text-align: left;
}
.menu li:nth-child(2){
text-align: left;
}
.menu li:nth-child(3){
text-align: center;
}
.menu li:nth-child(4){
text-align: right;
}
.menu li:nth-child(5){
text-align: right;
}