JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="tabs">
  <ul>
    <li><a class="tabref" href="#tabs-1" rel="https://bing.com">Table1</a></li>
    <li><a class="tabref" href="#tabs-2" rel="https://jsfiddle.net">Table2</a></li>
    <li><a class="tabref" href="#tabs-3" rel="https://jqueryui.com/demos/tabs">Table3</a>
  </ul>

  <div id="tabs-1">
  </div>

  <div id="tabs-2">
  </div>

  <div id="tabs-3">
  </div>
</div>

JavaScript

$(function() {

  var $tabs = $('#tabs').tabs();

  // Select start tab index number
  var MASTER_STARTtab = 0;
  $("#tabs").tabs({ active: MASTER_STARTtab
  });

  //Get tab contents
  beginTab = $("#tabs ul li:eq(" + MASTER_STARTtab + ")").find("a");
  loadTabFrame($(beginTab).attr("href"), $(beginTab).attr("rel"));

  // -----------------------------------

  $("a.tabref").click(function() {
    loadTabFrame($(this).attr("href"), $(this).attr("rel"));
  });

  //tab switching function
  function loadTabFrame(tab, url) {
    if ($(tab).find("iframe").length == 0) {
      var html = [];
      html.push('<div class="tabIframeWrapper">');
      html.push('<div class="openout"><a href="' + url + '"><border="0" alt="Open" title="Remove iFrame" /></a></div><iframe class="iframetab" src="' + url + '">Load Failed?</iframe>');
      html.push('</div>');
      $(tab).append(html.join(""));
      $(tab).find("iframe").height($(window).height() - 80);
    }
    return false;
  }
});