JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myTabs">
  <ul>
    <li><a href="#a">Tab 1</a></li>
    <li><a href="#b">Tab 2</a></li>
  </ul>
  <div id="a">This is the content panel linked to the first tab, it is shown by default.</div>
  <div id="b">This is the content panel linked to the second tab, it is shown when its tab is clicked.</div>
</div>

CSS

.status-message {
  padding: 11px 8px 10px;
  margin: 0;
  border: 1px solid #aaa;
  position: absolute;
  right: 10px;
  top: 9px;
  font-size: 11px;
  background-color: #fff;
}

JavaScript

(function($) {
  var handleSelect = function(e, tab) {

      $("<p></p>", {
        text: "Tab at index " + tab.index + " selected",
        "class": "status-message ui-corner-all"
      }).appendTo(".ui-tabs-nav", "#myTabs").fadeOut(5000, function() {
        $(this).remove();
      });
    },
    tabOpts = {
      select: handleSelect
    };
  $("#myTabs").tabs({
    select: handleSelect
  });
})(jQuery);