JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu-wrapper">
  <div class="navbar">
    
    <!--
<nav id="menu" class="menu">

<nav id="nav" class="nav">
-->
      <nav class="nav-wrapper" id="nav">
        <ul class="nav">
          <li> <a href=""> Home   </a> </li>
          <li>
            <a  href="#"> Parent One </a>
            <div class="dropdown has-panel" >
              <ul>
                <li>
                  <a href="#"> Child One</a>
                  <div class="dd-panel">
                    <img alt="Image" src="http://placehold.it/100x60&text=[img Child One]" class="media">
                    <span class="media-caption">
                      This is child one of parent menu one.  This is child one of parent menu one.  This is child one of parent menu one.  This is child one of parent menu one.
                    </span>
                  </div>
                </li>
                <li>
                  <a href="#">  Child Two  </a>
                  <div class="dd-panel">
                    <img alt="Image" src="http://placehold.it/100x60&text=[img Child Two]" class="media">
                    <span class="media-caption">
                      This is child Two of parent menu one. 
                    </span>
                  </div>
                  <div class="dropdown has-panel" style="position:relative;width:inherit;margin:0">
                    <ul>
                      <li>
                        <a  href="#"> - Grand Child One</a>
                        <div class="dd-panel" >
                          <img alt="Image" src="http://placehold.it/100x60&text=[Grand One]" class="media">
                          <span class="media-caption">
                            This is  Grand child one of Child One. This is  Grand child one of Child One. This is  Grand cne.
                          </span>
                        </div>
                      </li>
                      <li>
                        <a  href="#"> - Grand Child Two</a>
                 ...

CSS

.menu-wrapper {
    height: 30px;
    margin: 0 auto;
    position: relative;
    width: 1000px;
    z-index: 100;
    font-family:tahoma;
    font-size:12px;
}
.navbar {
    background: url("../images/navbar-bg.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
    margin: 0 auto;
    width: auto;
}
.activeMenu {
    color: #028f41 !important;
}
.nav-wrapper {
    background-color: #fff;
    margin: 0 auto;
    padding: 0;
    width: 840px;
}
.nav {
    color: #687074;
    font-size: 13px;
    font-weight: 400;
    height: 30px;
    margin: 0;
    padding: 0;
    text-align: center;
}
.nav ul {
    display: inline-table;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 500;
}
.nav li {
    list-style: none outside none;
    position: relative;
    text-align: left;
}
.nav > li {
    color: #687074;
    display: inline-block;
    font-size: 13px;
    text-align: left;
}
.nav > li > a {
    color: #687074;
    display: block;
    padding: 6px 15px 9px 11px;
    text-align: center;
    text-decoration: none;
}
.nav li:hover > a {
    color: #687074;
    text-decoration: none;
}
.nav > li > a:hover {
    border-left: 0 solid #444;
    border-right: 0 solid #444;
    border-top: 0 solid #444;
    color: #028f41;
    display: block;
    padding: 6px 15px 9px 11px;
    text-align: center;
    text-decoration: none;
}
.nav > li > a:hover .dropdown {
    background-color: yellow;
    border-left: 0 solid #444;
    border-right: 0 solid #444;
    border-top: 0 solid #444;
    color: #028f41;
    display: block;
    padding: 6px 12px 9px;
    text-align: center;
    text-decoration: none;
}
.nav li:hover {
    color: #028f41;
    text-decoration: none;
}
.nav > li:hover > a {
    color: #028f41;
    text-decoration: none;
}
.nav li:hover .dropdown {
    color: #028f41;
    display: block;
    text-decoration: none;
}
.nav li:hover .dropdown {
    color: red;
    display: block;
    text-decoration: none;
}
.dropdown {
   ...

JavaScript

$(document).ready(function () {
      //$("div.rptAlbums-wrapper > div:nth-child(2)").css("margin-right", "0px");
   // $(".nav").on("mouseenter", ":nth-child(4)", function () { $(this).find(".dropdown").addClass("dropdown-last"); }); //Division
    $(".nav").on("mouseenter", ":nth-child(5)", function () { $(this).find(".dropdown").addClass("dropdown-last"); }); //Media
    $(".nav").on("mouseenter", ":nth-child(6)", function () { $(this).find(".dropdown").addClass("dropdown-last"); }); //Careers
    $(".nav").on("mouseenter", " > li", function () {
        if ($(this).find(".dropdown").hasClass("has-panel")) {
        }
        else {
            $(this).find(".dropdown").removeClass("dropdown-last");
        }

        $(".dropdown li:first-child .dd-panel", $(this)).eq(0).css("display", "block");
        //show first li as default
        $(".dropdown li:first-child .dd-panel", $(this)).eq(0).addClass("active");
        
        //grandchild menu
         $('.dropdown .has-panel div').hide();
         $('.dropdown .has-panel ul').hide();
        
        $('.dropdown .has-panel').parent().click(function(){
            $("ul", this).toggle("slow");
                       

        });

        var $this = $(this).find(".dropdown ul li");
        // "+20" and "+30" are here to take into account padding and margins.
        var ulHeight = $this.parent().height() + 20;
        var captionHeight = $(this).find('.media-caption').height() + 20;
        var height = Math.max(ulHeight, captionHeight);
        //$this.closest('.dropdown').height(height);
        $this.closest('.dd-panel').height(height);
        $this.parent().find(".dd-panel").css("height", height - 20 + "px");
    });

    $(".dropdown ul li").each(function () {
        $(this).mouseover(function (e) {
            e.stopPropagation();
            console.log($(this));
            $(".dd-panel").css("display", "none");
            // $(this).parent().find(".dd-panel").css("color", "yellow");
          ...