JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/jQuery/jQuery-2.2.0.min.js"></script>
<link rel="stylesheet" href="https://almsaeedstudio.com/themes/AdminLTE/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://almsaeedstudio.com/themes/AdminLTE/dist/css/AdminLTE.min.css">
<script src="https://almsaeedstudio.com/themes/AdminLTE/bootstrap/js/bootstrap.min.js"></script>
<div class="col-md-6">
  <!-- Custom Tabs -->
  <div class="nav-tabs-custom">
    <ul class="nav nav-tabs" id="myTabs">
      <li class="active"><a href="#one" data-toggle="tab" aria-expanded="true"><i class="fa fa-fw fa-navicon"></i> One</a></li>
      <li class=""><a href="#two" data-url="/gh/gist/response.html/3843293/" data-toggle="tab" aria-expanded="false"><i class="fa fa-fw fa-users"></i> Two</a></li>
      <li class=""><a href="#tree" data-url="/gh/gist/response.html/3843301/" data-toggle="tab" aria-expanded="false"><i class="fa fa-comments" aria-hidden="true"></i> Tree</a></li>

    </ul>

    <div class="tab-content ">
      <div class="tab-pane active " id="one ">
        STATIC
      </div>
      <div class="tab-pane" id="two">
        <div class="overlay text-center">
          <i class="fa fa-refresh fa-spin fa-5x"></i>
        </div>
      </div>
      <div class="tab-pane" id="tree">
        <div class="overlay text-center">
          <i class="fa fa-refresh fa-spin fa-5x"></i>
        </div>
      </div>
      <!-- /.tab-pane -->
    </div>
    <!-- /.tab-content -->
  </div>
  <!-- nav-tabs-custom -->
</div>

JavaScript

$('#myTabs a').click(function(e) {
  e.preventDefault();
  $.ajaxSetup({
    'cache': true
  });
  var url = $(this).attr("data-url");
  var href = this.hash;
  var pane = $(this);
  $(href).load(url, function(result) {
    pane.tab('show');

  });
});