JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ul>

CSS

.nav {
    margin: 40px;
    padding: 0;
    
    border: 1px solid #ccc;
    border-bottom: none;
    
    list-style: none;
}

.nav li {
    padding: 8px 16px;
    
    border-bottom: 1px solid #ccc;    
    cursor: pointer;
}

.nav li.active {
  background: #eee;
}

JavaScript

var nav = $('.nav');

nav.children().eq(0).addClass('active');

nav.on('click', 'li', function() {
    $(this)
        .addClass('active')
        .siblings()
        .removeClass('active');
});