JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<html lang="en"><head>
    <meta charset="utf-8">
    <title>jQuery UI Accordion - Open on hoverintent</title>
</head>
<body>

<div class="demo">

<div id="accordion" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
    <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0"><span class="ui-icon ui-icon-triangle-1-s"></span><a href="#" tabindex="-1">Section 1</a></h3>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 105px; display: block; overflow: auto; padding-top: 11px; padding-bottom: 11px;" role="tabpanel">
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1"><span class="ui-icon ui-icon-triangle-1-e"></span><a href="#" tabindex="-1">Section 2</a></h3>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 105px; overflow: auto; display: none; padding-top: 11px; padding-bottom: 11px;" role="tabpanel">
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
        suscipit faucibus urna.
        </p>
    </div>
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default...

JavaScript

$(function() { 
        $("#accordion").accordion({ 
            event: "click myspecialevent" 
        }); 
    }); 
     
    $.sensitivity= 7;
    $.interval = 100;    
 
    $.event.special.myspecialevent= { 
        setup: function() { 
            $( this ).bind( "mouseover", jQuery.event.special.myspecialevent.handler ); 
        }, 
        teardown: function() { 
            $( this ).unbind( "mouseover", jQuery.event.special.myspecialevent.handler ); 
        }, 
        handler: function( event ) { 
            event.type = "myspecialevent"; 
            var self = this, 
                args = arguments, 
                target = $( event.target ), 
                cX, cY, pX, pY; 
             
            function track( event ) { 
                cX = event.pageX; 
                cY = event.pageY; 
            }; 
            pX = event.pageX; 
            pY = event.pageY; 
            function clear() { 
                target 
                    .unbind( "mousemove", track ) 
                    .unbind( "mouseout", arguments.callee ); 
                clearTimeout( timeout ); 
            } 
            function handler() { 
                if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < $.sensitivity ) { 
                    clear(); 
                    jQuery.event.handle.apply( self, args ); 
                } else { 
                    pX = cX; 
                    pY = cY; 
                    timeout = setTimeout( handler, $.interval ); 
                } 
            } 
            var timeout = setTimeout( handler, $.interval ); 
            target.mousemove( track ).mouseout( clear ); 
            return true; 
        } 
    };