JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
  <li><a href="">home</a></li>
  <li><a href="">about</a></li>
  <li><a href="">contact</a></li>
  <li><a href="">go on</a></li>
</div>

SASS

.menu
  margin: auto
  max-width: 500px
  height: 50px
  display: flex
  justify-content: space-around
  /* align-items: center */
  outline: 1px solid black
  li
    display: flex
    align-items: center
    justify-content: center
    list-style-type: none
    position: relative
    margin-right: 25px
    outline: 1px solid red
    height: 100%
    flex-grow: 1
  a
    position: absolute
    text-transform: uppercase
    color: #333
    font-size: 18px
    text-decoration: none
    white-space: nowrap
    &:hover
      font-weight: bold