JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navbar">                 
                  <li><a href="#">TEST</a></li>
                  <li><a href="#">TEST</a></li>
                  <li><a href="#">TEST</a></li>
                  <li><a href="#">TEST</a></li>
</ul>

CSS

.navbar {
  width: 100%;
  display: inline-block;
  list-style-type: none;
  margin: 0 auto;
  font-family: "open-sans",sans-serif;
  font-style: normal;
  font-weight: 600;
  padding-left: 5%;
}


.navbar  li{
	display: inline-block;
   border-width:5px;	
   border-top-style:solid;
   border-top-color: white;
}

.navbar li:hover, .navbar li:active{
   border-width:4px;	
   border-top-style:solid;
   border-top-color: #e0b82b;
   	  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);

}

.navbar li:after{
  display: block;
  content: '';
  border-top: solid 3px #019fb6;  
  -webkit-transform: scaleX(0.0001);
  -ms-transform: scaleX(0.0001);
  transform: scaleX(0.0001);  
  -webkit-transition: -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out;

}
.navbar li:hover:after{
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}
.navbar a{
  color: black;
  text-transform: uppercase;
 text-decoration: none;
  padding-left: 16px;
  padding-right: 16px;
   font-size: 14px;
  line-height: 4.2;


}

.navbar a:hover{
	  text-decoration: none;
}