JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<body>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Tab 1</a>
            </li>
            <li><a href="#tabs-2">Tab 2</a>
            </li>
        </ul>
        <div id="tabs-1">
            <p>1. Tab displays on MouseOver, but doesn't hide when the mouse leaves the element again (without hovering over a different tab).</p>
        </div>
        <div id="tabs-2">
            <p>2. If the tab is displayed (because it was left visible after leaving the element), a second MouseOver hides the tab again.</p>
        </div>
    </div>
</body>

</html>

JavaScript

$(function () {
    $("#tabs").tabs({
        collapsible: true,
        active: false,
        event: "mouseover"
    });
});