JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div id="menuzord" class="menuzord red menuzord-responsive"><a href="javascript:void(0)" class="showhide" style="display: none;"><em></em><em></em><em></em></a>
				<a href="javascript:void(0)" class="menuzord-brand">Menuzord</a>
				<ul class="menuzord-menu menuzord-right menuzord-indented scrollable" style="max-height: 400px;">
					<li class="active"><a href="#">Regular dropdown<span class="indicator">+</span></a>
						<ul class="dropdown" style="right: auto; display: none;">
							<li><a href="#">Second level</a></li>
							<li><a href="#">Second level</a></li>
							<li><a href="#">Second level</a></li>
							<li><a href="#">Second level<span class="indicator">+</span></a>
								<ul class="dropdown" style="">
									<li><a href="#">Third level</a></li>
									<li><a href="#">Third level</a></li>
									<li><a href="#">Third level</a></li>
									<li><a href="#">Third level<span class="indicator">+</span></a>
										<ul class="dropdown" style="">
											<li><a href="#">Fourth level</a></li>
											<li><a href="#">Fourth level</a></li>
											<li><a href="#">Fourth level</a></li>
											<li><a href="#">Fourth level</a></li>
											<li><a href="#">Fourth level</a></li>
										</ul>
									</li>
									<li><a href="#">Third level</a></li>
								</ul>
							</li>
							<li><a href="#">Second level</a></li>
						</ul>
					</li>
					<li><a href="#">Big Dropdown<span class="indicator">+</span></a>
						<ul class="dropdown" style="right: auto;">
							<li><a href="#">Second level</a></li>
							<li><a href="#">Second level</a></li>
							<li><a href="#">Second level</a></li>
							<li><a href="#">Second level</a></li>
							<li><a href="#">Second level</a></li>
							<li><a href="#">Second level</a></li>
							<li><a href="#">Second level</a></li>
							<li><a href="#">Second level</a></li>
							<li><a href="#">Second level</a></li>
							<li><a href="#">Second level</a></li>
							<li><a...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
.menuzord,
.menuzord * {
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

.menuzord {
    width: 100%;
    padding: 0 30px;
    float: left;
    position: relative;
    background: #fff
}

.menuzord a {
    -o-transition: color .3s linear, background .3s linear;
    -moz-transition: color .3s linear, background .3s linear;
    -webkit-transition: color .3s linear, background .3s linear;
    transition: color .3s linear, background .3s linear
}

.menuzord-menu.scrollable>.scrollable-fix {
    display: none
}

.menuzord-brand {
    margin: 18px 30px 0 0;
    float: left;
    color: #666;
    text-decoration: none;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer
}

.menuzord-menu {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none
}

.menuzord-menu.menuzord-right {
    float: right
}

.menuzord-menu>li {
    display: inline-block;
    float: left
}

.menuzord-menu>li>a {
    padding: 26px 16px;
    display: inline-block;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: #888;
    outline: 0;
    line-height: 1.42857143;
    -webkit-tap-highlight-color: transparent
}

.menuzord-menu>li.active>a,
.menuzord-menu>li:hover>a {
    color: #333
}

.menuzord-menu ul.dropdown,
.menuzord-menu ul.dropdown li ul.dropdown {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    z-index: 99;
    min-width: 180px;
    white-space: nowrap;
    background: #fff
}

.menuzord-menu ul.dropdown li ul.dropdown {
    left: 100%
}

.menuzord-menu ul.dropdown li {
    clear: both;
    width: 100%;
    border: 0;
    font-size: 12px;
    position: relative
}

.menuzord-menu ul.dropdown li a {
    width: 100%;
    background: 0 0;
    padding: 10px 25px 10px 22px;
    color: #888;
   ...

JavaScript

(function($){

  jQuery.fn.menuzord = function(options){
    var settings;
    $.extend( settings = {
      showSpeed: 300,
      hideSpeed: 300,
      trigger: "hover",
      showDelay: 0,
      hideDelay: 0,
      effect: "fade",
      align: "left",
      responsive: true,
      animation: "none",
      indentChildren: true,
      indicatorFirstLevel: "+",
      indicatorSecondLevel: "+",
      scrollable: true,
      scrollableMaxHeight: 400
    }, options);

    // variables
    var menu_container = $(this);
    var menu = $(menu_container).children(".menuzord-menu");
    var menu_li = $(menu).find("li");
    var showHideButton;
    var mobileWidthBase = 768;
    var bigScreenFlag = 2000; // a number greater than "mobileWidthBase"
    var smallScreenFlag = 200; // a number less than "mobileWidthBase"

    // dropdown/megamenu indicators
    $(menu).children("li").children("a").each(function(){
      if($(this).siblings(".dropdown, .megamenu").length > 0){
        $(this).append("<span class='indicator'>" + settings.indicatorFirstLevel + "</span>");
      }
    });
    $(menu).find(".dropdown").children("li").children("a").each(function(){
      if($(this).siblings(".dropdown").length > 0){
        $(this).append("<span class='indicator'>" + settings.indicatorSecondLevel + "</span>");
      }
    });

    // navigation alignment
    if(settings.align == "right"){
      $(menu).addClass("menuzord-right");
    }

    // dropdown indentation (mobile mode)
    if(settings.indentChildren){
      $(menu).addClass("menuzord-indented");
    }

    // responsive behavior
    if(settings.responsive){
      $(menu_container).addClass("menuzord-responsive").prepend("<a href='javascript:void(0)' class='showhide'><em></em><em></em><em></em></a>");
      showHideButton = $(menu_container).children(".showhide");
    }

    // scrollable menu
    if(settings.scrollable){
      if(settings.responsive){
        $(menu).css("max-height",...