JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<ul>
  <li>
    <a class="active" href="#">Some active link</a>
  </li>
  <li>
    <a href="#">Some other link</a>
  </li>
  <li>
    <a href="#">Some other link</a>
  </li>
</ul>

CSS

ul {
  padding-left: 0;
}
ul li {
  display: inline;
}
ul li a {
  padding: 1rem 1rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  color: black;
  text-transform: uppercase;
}
ul li a:hover, ul li a.active {
  border-bottom: 1px solid orange;
}