JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="myTab" class="nav nav-tabs">
  <li class=""><a href="#home" data-toggle="tab">Home</a></li>
  <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade " id="home">
    home tab. Takes some time to load. “Programs must be written for people to read, and only incidentally for machines to execute.” ― Hal Abelson
       “ Java is to JavaScript what Car is to Carpet. ” - Chris Heilmann
  </div>
  <div class="tab-pane fade in active" id="profile">
    Event is wired for the other tab (home tab)
  </div>
</div>

<div id=debug></div>
<button id=clr>clear</button>

CSS

#debug {
    background: black;
    color: green;
    height: 100px;
    width: 60%;
    margin-top: 50px;
    font-family: 'Couier';
    padding: 10px;
    overflow: auto;
}

JavaScript

$("a[href='#home']").on('shown.bs.tab', function(e) {
      log('shown - after the tab has been shown');
});

 // or even this one if we want the earlier event
 $("a[href='#home']").on('show.bs.tab', function(e) {
      log('show - before the new tab has been shown');
 });


//////////////////// just some logging help //////////
$log = $('#debug');

$('#clr').click(function() {
    $log.empty();
});
log = function(msg) {
    d = new Date();
    time = "" + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + ':' + d.getMilliseconds();
    
    $log.prepend(time + ' ' + msg + '<br>');
}