JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="page">
        <div id="header">
            <div class="jqueryslidemenu" id="menu">
                <ul class="nav-header">
                    <li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" href="/">Home</a>

                    </li>
                    <li><a href="/home/">Company</a>

                        <ul style="top: 40px; visibility: visible; left: 0px; width: 174px; display: none;">
                            <li><a href="/company/news/">News</a>

                            </li>
                            <li><a href="/company/news/">News</a>

                            </li>
                            <li><a href="/company/news/">News</a>

                            </li>
                            <li><a href="/company/news/">News</a>

                                <ul style="top: 0px; display: none; visibility: visible;">
                                    <li><a href="/company/news/">News</a>

                                    </li>
                                    <li><a href="/company/news/">News</a>

                                    </li>
                                    <li><a href="/company/news/">News</a>

CSS

* html ul.nav-header li a {
    /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
}
#page #header #menu {
    float: left;
    clear: left;
    height: 40px;
    margin-top: 38px;
    font: normal 12px Arial;
}
#page #header ul {
    z-index: 1000000;
}
#page #header ul.nav-header {
    list-style:none;
    margin:0 0 0 10px;
    height:40px;
    padding:0px;
    width:auto;
    overflow:visible;
    float: left;
    z-index: 2
}
#page #header ul.nav-header li {
    position: relative;
    display: inline;
    float: left;
    font: normal 13px'Myriad Pro', Arial, Helvetica, sans-serif;
    padding:0px 3px;
    margin: 0;
    color:#136302;
}
#page #header ul.nav-header li>a {
    padding: 12px 7px 12px;
    display: block;
    color: #161342;
    text-decoration: none;
}
#page #header ul.nav-header li.nav-selected a, #page #header ul.nav-header>li:hover>a {
    background: #15a105;
    color: #fff
}
#page #header ul.nav-header li ul {
    margin: 0;
    padding: 0px 3px;
    position: absolute;
    left: 0;
    display: block;
    visibility: hidden;
    padding-bottom: 25px;
}
#page #header ul.nav-header li ul li {
    margin-left: 0 !important;
    margin-top: 1px;
    padding: 0;
    display: list-item;
    list-style: none;
    float: none;
}
#page #header ul.nav-header li ul li a {
    background: rgb(235, 61, 5);
    color: #fff;
    font: normal 12px'Myriad Pro';
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 6px 6px !important;
    width: 156px;
    line-height: 20px;
    border: 0;
}
#page #header ul.nav-header li ul li a:hover {
    background: rgba(155, 255, 255, 0.92);
    color: #07a105;
    font: normal 12px'Myriad Pro';
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 6px 6px !important;
    width: 156px;
    line-height: 20px;
    border: 0;
}
#page #header ul.nav-header li ul li ul li {
    margin-top: 0 !important;
    margin-bottom: 1px !important;
   ...

JavaScript

var arrowimages = {
    down: ['downarrowclass', 'down.gif', 23],
    right: ['rightarrowclass', 'right.gif']
}

var jqueryslidemenu = {

    animateduration: {
        over: 200,
        out: 100
    }, //duration of slide in/ out animation, in milliseconds

    buildmenu: function (menuid, arrowsvar) {
        jQuery(document).ready(function ($) {
            var $mainmenu = $("#" + menuid + ">ul")
            var $headers = $mainmenu.find("ul").parent()
            $headers.each(function (i) {
                var $curobj = $(this)
                var $subul = $(this).find('ul:eq(0)')
                this._dimensions = {
                    w: this.offsetWidth,
                    h: this.offsetHeight,
                    subulw: $subul.outerWidth(),
                    subulh: $subul.outerHeight()
                }
                this.istopheader = $curobj.parents("ul").length == 1 ? true : false
                $subul.css({
                    top: this.istopheader ? this._dimensions.h + "px" : 0
                })


                $curobj.hover(

                function (e) {
                    var $targetul = $(this).children("ul:eq(0)")
                    this._offsets = {
                        left: $(this).offset().left,
                        top: $(this).offset().top
                    }
                    var menuleft = this.istopheader ? 0 : this._dimensions.w
                    menuleft = (this._offsets.left + menuleft + this._dimensions.subulw > $(window).width()) ? (this.istopheader ? -this._dimensions.subulw + this._dimensions.w : -this._dimensions.w) : menuleft
                    if ($targetul.queue().length <= 1) //if 1 or less queued animations
                    $targetul.css({
                        left: menuleft + "px",
                        width: this._dimensions.subulw + 'px'
                    }).slideDown(jqueryslidemenu.animateduration.over)
                },

                function (e) {
                    var...