JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tabs">
    <li><a href="#tab-1">Tab one</a></li>    
    <li><a href="#tab-2">Tab two</a></li>
    <li><a href="#tab-3">Tab three</a></li>
  </ul>

  <div id="tab-1">
    This is the first tab content
  </div>

  <div id="tab-2">
    This is the second tab content
  </div>

  <div id="tab-3">
    This is the third tab content
  </div>

JavaScript

jQuery.fn.minitabs = function(index,speed,effect) {
  var class = "#" + this.attr('class');
  var $divs = $(id + ">DIV");
  $divs.not($divs.eq(index)).hide();
  $(id + ">UL>LI>A").eq(index).addClass("current");
  $(id + ">UL>LI>A").click(
    function(){
      $(id + ">UL>LI>A").removeClass("current");
      $(this).addClass("current");
      $(this).blur();
      var re = /([_\-\w]+$)/i;
      var target = $('#' + re.exec(this.href)[1]);
      var old = $(id + ">DIV");
      switch (effect) {
        case 'fade':
          old.fadeOut(speed).fadeOut(speed);
          target.fadeIn(speed);
          break;
        case 'slide':
          old.slideUp(speed);  
          target.fadeOut(speed).fadeIn(speed);
          break;
        default : 
          old.hide(speed);
          target.show(speed)
      }
      return false;
    }
 );
}
$('.tabs').minitabs(1);