JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <p class="site-title"><a><img src="images/logo/iab_logo.png" alt="Indian Association for the Blind" title="Indian Association for the Blind" /></a></p>
            <nav class="navigation"id="nav">
                <ul id="menu-wplook-main-menu"class="parent" >
                     <li class="menu-item"><a id="menu-item1">WHO WE ARE</a>
                        <ul  class="sub-menu"id="sub-menu1">
                            <li class="sub-menu-item1"id="sub-menu-item1"><a>ABOUT FOUNDER</a></li>
                            <li class="sub-menu-item2"><a>ABOUT IAB</a></li>
                            <!--<li class="menu-item "><a href="team-iab.php">TEAM IAB</a></li>-->
                        </ul>
                    </li>
                    <li class="menu-item current"><a >WHAT WE DO</a>
                        <ul class="sub-menu"id="sub-menu2">
                            <li class="sub-menu-item3 "><a >EDUCATION</a></li>
                            <li class="sub-menu-item4"><a >CAREER &amp; SKILL TRAINING</a></li>
                            <li class="sub-menu-item5"><a >RESIDENTIAL SERVICES</a></li>
                            <li class="sub-menu-item6"><a >SUPPORT SERVICES</a></li>
                            <li class="sub-menu-item7"><a >EMPLOYMENT</a></li>
                        </ul>
                    </li>
                    <li class="menu-item"><a >AWARDS &amp; RECOGNITION</a></li>
                    <li class="menu-item4"><a >NEWS &amp; EVENTS</a></li>
                    <li class="menu-item5"><a >CONTACT</a></li>
                </ul>
            </nav>
    <div class="clear"></div>
</div>

CSS

#menu-wplook-main-menu li.active > a{
           border-bottom: 5px solid #337ab7; 
        }
        
ul {
  list-style:none;
}

JavaScript

$(document).ready(function(){
            $('ul li a').click(function(){
                   $(this).parents("li").addClass('active')
            });
        });