JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <ul>
        <li><a class="a_hov" href="">TEST</a></li>
        <li><a class="a_hov" href="">TEST</a></li>
    </ul>
</div>

CSS

#menu ul { list-style: none; margin: 0; padding: 0; position: relative; height: 100%;float: left; }
#menu ul li { display: block; height: 100%; float: left; overflow: visible; }
#menu ul li a { float: left; display: block; }
#menu ul li a{color: #565656;background-color: transparent;font-size: 15px;font-weight: bold;text-decoration: none;padding: 40px 26px; font-family: Arial;width: 126px;text-align: center;}
#menu ul li a { color: #000; padding: 4px 14px; display: block; width: 150px;}
#menu>ul>li a:hover:after {
        background-color: #4db2ec;
        content: "";
        width: 100%;
        height: 4px;
        position: absolute;
        bottom: 0;
        left: 0;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }