JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<body>
  <div id="tabs">
    <ul>
      <li><a href="#tab1">Tab 1</a></li>
      <li><a href="#tab2">Tab 2</a></li>
    </ul>

    <div id="tab1">
      <h2>Tab 1</h2>
      <ul>
        <li>apples</li>
      </ul>
    </div>

    <div id="tab2">
      <h2>Tab 2</h2>
      <ul>
        <li>bananas</li>
      </ul>
    </div>
  </div>
</body>

JavaScript

$(init);

function init() {
  $("#tabs").tabs({
    event: "click hoverintent"
  });
} /* init(){} */

// ------------------------------------------------------------------------
// Add hoverIntent to JQuery ui-tabs
// [auto-focus/raise on prolonged mouseover]

// https://stackoverflow.com/questions/15346939/adding-hoverintent-to-jquery-ui-tabs/65818771#65818771
var cfg = ($.hoverintent = {
  sensitivity: 3,
  interval: 300
}); /* cfg */

$.event.special.hoverintent = {
  setup: function() {
    $(this).bind("mouseover", jQuery.event.special.hoverintent.handler);
  },
  /* setup (){} */

  teardown: function() {
    $(this).unbind("mouseover", jQuery.event.special.hoverintent.handler);
  },
  /* teardown */

  handler: function(event) {
    var that = this,
      args = arguments,
      target = $(event.target),
      cX, cY, pX, pY;

    function track(event) {
      cX = event.pageX;
      cY = event.pageY;
    }; /* track */

    pX = event.pageX;
    pY = event.pageY;

    function clear() {
      target
        .unbind("mousemove", track)
        .unbind("mouseout", arguments.callee);
      clearTimeout(timeout);
    } /* clear */

    function handler() {
      if ((Math.abs(pX - cX) + Math.abs(pY - cY)) < cfg.sensitivity) {
        clear();
        event.type = "hoverintent";
        jQuery.event.dispatch.apply(that, args);
      } /* if */
      else {
        pX = cX;
        pY = cY;
        timeout = setTimeout(handler, cfg.interval);
      } /* else */
    } /* handler (inner) */

    var timeout = setTimeout(handler, cfg.interval);
    target.mousemove(track).mouseout(clear);
    return true;
  } /* handler (outer) */
}; /* event.special.hoverintent */