JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menubar">

  <nav>
    <ul class="mainMenu">
      <li class="navbar"><a href="#">Hub</a></li>
      <li class="navbar"><a href="#">Blog</a></li>
      <li class="navbar"><a href="#">News</a></li>
    </ul>
  </nav>

</div>

CSS

.menubar {
  height: auto;
  background-color: #283747;
  margin: auto;
  position: relative;
}

.mainMenu {
  list-style-type: none;
  text-align: center;
  position: relative;
  vertical-align: middle;
}

li {
  list-style-type: none;
  display: inline-block;
  padding: 1rem 4rem 1rem 3rem;
  background: #fff;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 1rem;
  margin: 30px auto;
}

li.navbar a {
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
}