JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <nav>
    <ul>
      <li class="active"><a href="#">Foo</a></li>
      <li><a href="#">Foo</a></li>
      <li><a href="#">Foo</a></li>
      <li><a href="#">Foo</a></li>
      <li><a href="#">Foo</a></li>
      <li><a href="#">Foo</a></li>
    </ul>
  </nav>
</div>

CSS

body{
  font-size:16px;
  font-family:sans-serif;
}

a{
  color:#fff;
  text-decoration:none;
}

.container{
  width:960px;
  margin: 0 auto;
}

nav {
  width:100%;
  background:#55a;
  color:#fff;
  display:block;
}

ul{
  list-style-type:none;
}

li{
  display:inline-block;
  margin-right:30px;
  padding:10px;
  
}



ul > li.active{
  border-bottom:3px solid red;
}

ul > li:hover{
  border-bottom: 3px solid yellow;
}