JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="nav-main mega-menu">
    <ul class="nav nav-pills nav-main" id="mainMenu">
        <li> <a href="">item1</a>

        </li>
        <li><a href="">item2</a>

        </li>
        <li><a href="">item3</a>

        </li>
        <li class="dropdown"> <a class="dropdown-toggle" href="page-services.html">
            item4
            <i class="icon icon-angle-down"></i>
        </a>

            <ul class="dropdown-menu">
                <li><a href="">item5</a>

                </li>
                <li><a href="">item6</a>

                </li>
                <li><a href="">item7</a>

                </li>
                <li><a href="">item8</a>

                </li>
                <li><a href="">item9</a>

                </li>
            </ul>
        </li>
        <li><a href="">item10</a>

        </li>
        <li><a href="">item11</a>

        </li>
        <li><a href="">item12</a>

        </li>
    </ul>
</nav>

CSS

ul.nav-pills > li.active > a,
ul.nav-pills > li.active > a:hover,
ul.nav-pills > li.active > a:focus {
  background-color: #0088cc;
}

JavaScript

$('.nav-pills').on('click', 'li', function() {
            $('.nav-pills li.active').removeClass('active');
            $(this).addClass('active');
            return false;
        });