JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//current.bootstrapcdn.com/bootstrap-v204/css/bootstrap-combined.min.css">
<script src="http://current.bootstrapcdn.com/bootstrap-v204/js/bootstrap-tab.js"></script>
<ul class="nav nav-tabs" id="myTab">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
 
<div class="tab-content">
  <div class="tab-pane" id="home">
    <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
  </div>
  <div class="tab-pane" id="profile">
    <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
  </div>
  <div class="tab-pane" id="messages">
    <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
  </div>
  <div class="tab-pane" id="settings">
    <p>Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin.</p>
  </div>
</div>

JavaScript

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

$('a[data-toggle="tab"]').on('shown', function (e) {
  console.log(e.target); // activated tab
  console.log(e.relatedTarget); // previous tab
});

$('a[data-toggle="tab"]:first').tab('show');