JSFiddle - React, Tailwind, and code Playground

HTML

<script src="$(&#39;ul.nav li.dropdown&#39;).hover(function () {     $(this).closest(&#39;.dropdown-menu&#39;).show();     $(this).addClass(&#39;open&#39;); },  /*function () {    $(&quot;#search-query&quot;).focusin(function () {         $(&#39;.events&#39;).addClass(&#39;search-active&#39;);     });        if ($(&#39;."></script>
<link rel="stylesheet" href="http://webinsation.com/ministry-sync/stylesheets/style-guide.css">
<nav class="navbar">
    <div class="nb-inner nb-main">
        <div class="nb-left"> <a class="logo-link" href="#"><img src="images/ministry-sync-logo.png" class="logo default" /></a>

            <div class="nb-title"> <a class="main-title" href="#">A Hope Centered Pregnancy Center (Yeah, some people actually have this long title :)</a>

            </div>
        </div>
        <ul class="nav nb-right">
            <li class="dropdown nb-tab events">
                <!-- onClick: Go to -> Events Card page --> <a href="#" class="nav-tab dropdown-toggle nt-events needsclick" data-toggle="dropdown">
                        <b class="caret"></b>
                        <span>Events</span>
                    </a>

                <ul role="menu" aria-labeledby="dLabel" class="dropdown-menu global-menu">
                    <form class="navbar-search">
                        <input id="search-query" type="text" class="search-query" placeholder="Search All Events"> <i class="icon-clear-search"></i>

                    </form>
                    <li class="dropdown-title">Recently Viewed Events:</li>
                    <li class="nav-section"><a class="dd-item-indent" href="#">The Heart of the Matter<span class="event-info">Apr. 5, 2013 | Hyatt Regency</a>
                    </li>
                    <li><a class="dd-item-indent" href="#">All Hands on Deck<span class="event-info">Apr. 5, 2013 | Hyatt Regency</a>
                    </li>
                    <li><a class="dd-item-indent" href="#">Young Life Golf Tournament<span...

JavaScript

$("ul.nav li.dropdown").hover(

function () {
    $('.dropdown-menu').show();
    
    $(this).addClass('open');
},

function () {
    if (!$("#search-query").is(':focus')){
        $(this).removeClass('open');
    } else if ( !$( '.events' ).is( ':hover' ) ) {
        $("#search-query").blur();
        $('.dropdown-menu').hide();
    }
});