JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="menu">
  <nav id="menucenter">
    <ul>
      <li><a href="index.html">Quién soy?</a></li>
      <li><a href="index.html">Creatividad</a></li>
      <li><a href="secondarypages/schedule.html">Acción</a></li>
      <li><a href="secondarypages/places.html">Servicio</a></li>
      <li class="right"><a href="secondarypages/places.html">Servicio</a></li>
    </ul>
  </nav>
</nav>

CSS

#menu {
    padding: 5px;
    background-color: rgb(50,50,50);
}

#menucenter {
    padding: 10px;
    padding-bottom: 0px;
    position: relative;
}
#menucenter ul {
    list-style-type: none;
    margin:0px;
    padding: 5px;
    overflow: scroll;
    background-color: rgb(50,50,50);
}

#menucenter li {
    float: left;
    padding-bottom:6px;
}
#menucenter li.right {
    float: right;
}
#menucenter li.highlight{
    top:42px;
    border-bottom:solid 3px #5CF1B3;
    border-radius: 2px;
    position: absolute;
}

#menucenter li a {
    display: inline;
    color: white;
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
    background-color: rgb(50,50,50);
    border-bottom:solid 1px #00b3b3;
}