JSFiddle - React, Tailwind, and code Playground

by SeasonEnds

HTML

<div class="navwrapper">
            

            <ul class="sf-menu">
                   <li class="current"><a href="nav1">Nav 1<span class="sf-sub-indicator"> &#187;</span></a>
                <ul class="sf-with-ul">
                    <li class="expanded">
                    
                    <div id="recentsearches">
                        <a href="#" class="mainlink">Stuff</a>
                            <p><a href="#">Stuff </a></p>
                            <p><a href="#">Stuff </a></p>
                            <p><a href="#">Stuff </a></p>
                            <p><a href="#">Stuff </a></p>
                            
                        <hr />
                        
                        <a href="#" class="mainlink">Stuff</a>
                            <p><a href="#">Stuff </a></p>
                            <p><a href="#">Stuff </a></p>
                            <p><a href="#">Stuff </a></p>
                            <p><a href="#">Stuff </a></p>
                    </div>
                    
                    </li>
                </ul>
                </li><!-- end ul li -->
                
                <li><a href="nav2">Nav 2<span class="sf-sub-indicator"> &#187;</span></a>
                  <ul class="sf-with-ul">
                    <li><a href="stuff">Stuff</a></li>
                    <li><a href="stuff">Stuff</a></li>
                    <li class="end"><a href="stuff">Stuff</a></li>               
                  </ul>                
                </li><!-- end ul li -->
                
                <li><a href="nav3">Nav 3<span class="sf-sub-indicator"> &#187;</span></a>
                  <ul class="sf-with-ul">
                    <li><a href="stuff">Stuff</a></li>
                    <li class="end"><a href="#">stuff</a></li>
                  </ul>                   
                </li><!-- end ul li -->
                        
         </ul>
         

             <ul class="cart">
   ...

CSS

/*** ESSENTIAL STYLES FOR SUPERFISH ***/
.navwrapper {
    position: relative;
    z-index:10000;
    float:left;
    width:100%;
    background: #2194be;
    background-image: url(../images/mainnav2.png);
    background-repeat:repeat-x;
    background-position:bottom;
    -webkit-box-shadow: 0px 5px 5px 0px #d7d7d7;
    -moz-box-shadow: 0px 5px 5px 0px #d7d7d7;
    box-shadow: 0px 5px 5px 0px #d7d7d7;

}

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
    margin:            0;
    padding:        0;
    list-style:        none;
}
.sf-menu {
    line-height:    1.0;
}
.sf-menu ul {
    position:        absolute;
    top:            -999em;
    width:            10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
    width:            100%;
}
.sf-menu li:hover {
    visibility:        inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
    float:            left;
    position:        relative;
}
.sf-menu a {
    display:        block;
    position:        relative;
    color:            #fff;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left:            0;
    top:            3em; /* match top ul list item height */
    z-index:        99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:            10em; /* match ul width */
    top:            4em;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left:            10em; /* match ul width */
    top:            4em;
}

/*** DEMO SKIN ***/
.sf-menu {
    float:            left;
    margin-bottom:    0;
}
.sf-menu {
    float:            left;
    margin-bottom:    0;
}
.sf-menu a {
    padding:         1em 1.5em 1em .4em;
    color:            #fff;
    text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text...

JavaScript

/*
 * Superfish v1.4.8 - jQuery menu widget
 * Copyright (c) 2008 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 *     http://www.opensource.org/licenses/mit-license.php
 *     http://www.gnu.org/licenses/gpl.html
 *
 * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
 */

;(function($){
    $.fn.superfish = function(op){

        var sf = $.fn.superfish,
            c = sf.c,
            $arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
            over = function(){
                var $$ = $(this), menu = getMenu($$);
                clearTimeout(menu.sfTimer);
                $$.showSuperfishUl().siblings().hideSuperfishUl();
            },
            out = function(){
                var $$ = $(this), menu = getMenu($$), o = sf.op;
                clearTimeout(menu.sfTimer);
                menu.sfTimer=setTimeout(function(){
                    o.retainPath=($.inArray($$[0],o.$path)>-1);
                    $$.hideSuperfishUl();
                    if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
                },o.delay);    
            },
            getMenu = function($menu){
                var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
                sf.op = sf.o[menu.serial];
                return menu;
            },
            addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
            
        return this.each(function() {
            var s = this.serial = sf.o.length;
            var o = $.extend({},sf.defaults,op);
            o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
                $(this).addClass([o.hoverClass,c.bcClass].join(' '))
                    .filter('li:has(ul)').removeClass(o.pathClass);
            });
            sf.o[s] = sf.op = o;
            
            $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' :...