JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li><a class="selectedTab" href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a class="notSelectedTab" href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a class="notSelectedTab" href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a class="notSelectedTab" href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

JavaScript

var tabLabels = $("ul li a");
        tabLabels.click(function(e) {
          e.preventDefault(); // prevent the default action
          e.stopPropagation(); // stop the click from bubbling
          tabLabels.removeClass("selectedTab notSelectedTab").not(this).addClass("notSelectedTab");
          $(this).addClass("selectedTab");
        });