JSFiddle - React, Tailwind, and code Playground

HTML

<!--Mega Menu Anchor-->
<a href="http://www.javascriptkit.com" id="megaanchor">Tech Links</a>



<!--Mega Drop Down Menu HTML. Retain given CSS classes-->
<div id="megamenu1" class="megamenu">

<div class="column">
    <h3>Web Development</h3>
    <ul>
    <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
    <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
    <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
    <li><a href="http://www.codingforums.com">Coding Forums</a></li>
    <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
    </ul>
</div>

<div class="column">
    <h3>News Related</h3>
    <ul>
    <li><a href="http://www.cnn.com/">CNN</a></li>
    <li><a href="http://www.msnbc.com">MSNBC</a></li>
    <li><a href="http://www.google.com">Google</a></li>
    <li><a href="http://news.bbc.co.uk">BBC News</a></li>
    </ul>
</div>

<div class="column">
    <h3>Technology</h3>
    <ul>
    <li><a href="http://www.news.com/">News.com</a></li>
    <li><a href="http://www.slashdot.com">SlashDot</a></li>
    <li><a href="http://www.digg.com">Digg</a></li>
    <li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
    </ul>
</div>

<br style="clear: left" /> <!--Break after 3rd column. Move this if desired-->

<div class="column">
    <h3>Web Development</h3>
    <ul>
    <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
    <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
    <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
    <li><a href="http://www.codingforums.com">Coding Forums</a></li>
    <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
    </ul>
</div>

<div class="column">
    <h3>News Related</h3>
    <ul>
    <li><a href="http://www.cnn.com/">CNN</a></li>
    <li><a href="http://www.msnbc.com">MSNBC</a></li>
    <li><a href="http://www.google.com">Google</a></li>
    <li><a href="http://news.bbc.co.uk">BBC...

CSS

.megamenu{
position: absolute;
display: none;
left: 0;
top: 0;
background: white;
border: 1px solid #f06b24;
border-width: 5px 1px;
padding: 10px;
font: normal 12px Verdana;
z-index: 100;

}

.megamenu .column{
float: left;
width: 180px; /*width of each menu column*/
margin-right: 5px;
}

.megamenu .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.megamenu .column ul li{
padding-bottom: 5px;
}

.megamenu .column h3{
background: #e0e0e0;
font: bold 13px Arial;
margin: 0 0 5px 0;
}

.megamenu .column ul li a{
text-decoration: none;
}

.megamenu .column ul li a:hover{
color: red;
}

JavaScript

/* jQuery Mega Menu v1.02
* Last updated: June 29th, 2009. This notice must stay intact for usage 
* Author: JavaScript Kit at http://www.javascriptkit.com/
* Visit http://www.javascriptkit.com/script/script2/jScale/ for full source code
*/

jQuery.noConflict();

var jkmegamenu={

effectduration: 300, //duration of animation, in milliseconds
delaytimer: 200, //delay after mouseout before menu should be hidden, in milliseconds

//No need to edit beyond here
megamenulabels: [],
megamenus: [], //array to contain each block menu instances
zIndexVal: 1000, //starting z-index value for drop down menu
$shimobj: null,

addshim:function($){
    $(document.body).append('<IFRAME id="outlineiframeshim" src="'+(location.protocol=="https:"? 'blank.htm' : 'about:blank')+'" style="display:none; left:0; top:0; z-index:999; position:absolute; filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>')
    this.$shimobj=$("#outlineiframeshim")
},

alignmenu:function($, e, megamenu_pos){
    var megamenu=this.megamenus[megamenu_pos]
    var $anchor=megamenu.$anchorobj
    var $menu=megamenu.$menuobj
    var menuleft=($(window).width()-(megamenu.offsetx-$(document).scrollLeft())>megamenu.actualwidth)? megamenu.offsetx : megamenu.offsetx-megamenu.actualwidth+megamenu.anchorwidth //get x coord of menu
    //var menutop=($(window).height()-(megamenu.offsety-$(document).scrollTop()+megamenu.anchorheight)>megamenu.actualheight)? megamenu.offsety+megamenu.anchorheight : megamenu.offsety-megamenu.actualheight
    var menutop=megamenu.offsety+megamenu.anchorheight  //get y coord of menu
    $menu.css({left:menuleft+"px", top:menutop+"px"})
    this.$shimobj.css({width:megamenu.actualwidth+"px", height:megamenu.actualheight+"px", left:menuleft+"px", top:menutop+"px", display:"block"})
},

showmenu:function(e, megamenu_pos){
    var megamenu=this.megamenus[megamenu_pos]
    var $menu=megamenu.$menuobj
    var $menuinner=megamenu.$menuinner
   ...