JSFiddle - React, Tailwind, and code Playground

by balefrost

HTML

<ul id="navbar">
        <li ><a class="active">Home</a></li>
        <li><a >Mens</a></li>
        <li><a >Women</a></li>
        <li><a >Accessories</a></li>
        <li><a >Sell</a></li>
        <li id="Ig-bag"><a ><i class="far fa-shopping-bag"></i></a></li>
        <a id="close"><i class="far fa-times"></i></a>
        <li><a>
        <i class="fa-regular fa-user" id="user-img"></i>
        <div class="login-logout-popup hide">
            <p class="account-info">Log in as, name</p>
            <button class="btn" id="user-btn">Log out</button>
        </div>
        </a></li>
    </ul>

CSS

#navbar li a{
text-decoration: none;
font-size: 18px;
font-weight: 600;
/* change color later */
color: #fff;
transition: 0.3s ease;
 }
#navbar li a:hover,
#navbar li a.active {
/* change color later */
color: #F30C1E;
  }

#navbar li a.active::after,
#navbar li a:hover::after {
content: "";
width: 30%;
height: 2px;
background: #F30C1E;
position: absolute;
bottom: -4px;
left: 20px;
  }

JavaScript

const navbar = document.querySelector('#navbar').querySelectorAll("a");
console.log(navbar);
navbar.forEach(element => {
element.addEventListener("click", function() {
navbar.forEach(nav=>nav.classList.remove('active'))
this.classList.add('active');
    })
});