JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navbar">
    <li>ABCDE</li>
    <li>12345</li>
    <li>QWERT</li>
</ul>

CSS

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

    -webkit-transition: all 0.5s ease;                  
    -moz-transition: all 0.5s ease;                 
    -o-transition: all 0.5s ease;   
    -ms-transition: all 0.5s ease;          
    transition: all 0.5s ease;
    
}

.navbar li:hover, .navbar li:active{
   border-width:4px;    
   border-top-style:solid;
   border-top-color: #e0b82b;}