JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<div id="top-container">
        <div class="wrapper">
            <div class="content-placeholder">
                <div class="stn">
                   Welcome <span class="stn-name">Superuser</span>! Station: <span class="stn-name">Mumbai</span></span>
                </div>
                <div class="logout">
                <a href="#">Logout</a>
                </div>
            </div>
        </div>
    </div>
    <!--Header Section-->
    <div id="header-container">
        <div class="wrapper">
            <div class="content-placeholder">
                <div class="logo">
                    <img src="Images/logo.png" alt="logo" />
                </div>
            </div>
        </div>
    </div>
    <!--Menu Section-->
    <div id="menu-container">
        <div class="wrapper">
            <div class="content-placeholder">
                <div style="width: 100%; height: 30px;">
                    <ul class="dropdown">
                        <li><a href="#">Really Tall Menu</a>
                            <ul>
                                <li><a href="#">Artificial Turf</a></li>
                                <li><a href="#">Benches &amp; Bleachers</a></li>
                                <li><a href="#">Communication Devices</a></li>
                                <li><a href="#">Dugouts</a></li>
                                <li><a href="#">Fencing &amp; Windscreen</a></li>
                                <li><a href="#">Floor Protectors</a></li>
                                <li><a href="#">Foul Poles</a></li>
                                <li><a href="#">Netting</a></li>
                                <li><a href="#">Outdoor Furniture &amp; Storage</a></li>
                                <li><a href="#">Outdoor Signs</a></li>
                                <li><a href="#">Padding</a></li>
                                <li><a href="#">Scoreboards</a></li>
                                <li><a href="#">Shade...

CSS

body
{
    background: url("Images/body-bg.png") repeat left top;
    font-size:14px;
    font-family: Calibri;
}
 a
{
    text-decoration: none;
}
 a:hover
{
    text-decoration: none;
}

/* HORIZONTAL DROP-MENU */
/* LEVEL ONE */
ul.dropdown
{
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
ul.dropdown li
{
   
    float: left;
    width: 160px;
    position: relative;
    color: #FFFFFF;

}
ul.dropdown a:hover
{
    color: #0d9b8c;
}
ul.dropdown li a
{
   font-size:13px;
    display: block;
    padding: 8px 2px 8px 4px;
    color: #FFFFFF;
    position: relative;
    z-index: 2000;
    border-right: 1px solid #333;
}
ul.dropdown li:last-child a
{
    border-right: none; /* Doesn't work in IE */
}
ul.dropdown li a:hover, ul.dropdown li a.hover
{
    background: #0d9b8c;
    position: relative;
    color: #FFFFFF;
}
/* LEVEL TWO */
ul.dropdown ul
{
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 160px;
    z-index: 1000;
}
ul.dropdown ul li
{
    font-weight: normal;
    background: #006599;
    color: #FFFFFF;
    border-bottom: 1px solid #ccc;
}
ul.dropdown ul li a
{
    display: block;
        padding: 8px 2px 8px 4px;
    background: #0d9b8c !important;
    color: #FFFFFF;
}
ul.dropdown ul li a:hover
{
    display: block;
    background: #99CCFF !important;
    color: #000000;
}
#top-container
{
    width: 100%;
    height: 30px;
    background: #dddedf url('Images/top-header-bg.png') repeat-x top left;
    position: relative;
}
#top-container:before, #top-container:after
{
    display: table;
    content: "";
    zoom: 1;
}
#top-container:after
{
    clear: both;
}
#header-container
{
    width: 100%;
    height: 100px;
    background: #fff url('Images/header-bg.png') no-repeat center center;
    position: relative;
}
#header-container:before, #header-container:after
{
    display: table;
    content: "";
    zoom: 1;
}
#header-container:after
{
    clear: both;
}
#menu-container
{
    width: 100%;
 ...

JavaScript

var maxHeight = 300;
$(function () {
    $(".dropdown > li").hover(function () {
        var $container = $(this),
             $list = $container.find("ul"),
             $anchor = $container.find("a"),
             height = $list.height() * 1.1,       // make sure there is enough room at the bottom
             multiplier = height / maxHeight;     // needs to move faster if list is taller
        // need to save height here so it can revert on mouseout            
        $container.data("origHeight", $container.height());
        // so it can retain it's rollover color all the while the dropdown is open
        $anchor.addClass("hover");
        // make sure dropdown appears directly below parent list item    
        $list
            .show()
            .css({
                paddingTop: $container.data("origHeight")
            });
        // don't do any animation if list shorter than max
        if (multiplier > 1) {
            $container
                .css({
                    height: maxHeight,
                    overflow: "hidden"

                })
                .mousemove(function (e) {
                    var offset = $container.offset();
                    var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                    if (relativeY > $container.data("origHeight")) {
                        $list.css("top", -relativeY + $container.data("origHeight"));
                        $list.css("z-index", "1000");
                    };
                });
        }
    }, function () {
        var $el = $(this);
        // put things back to normal
        $el
            .height($(this).data("origHeight"))
            .find("ul")
            .css({ top: 0 })
            .hide()
            .end()
            .find("a")
            .removeClass("hover");
    });
    // Add down arrow only to menu items with submenus
    $(".dropdown > li:has('ul')").each(function () {
       ...