JSFiddle - React, Tailwind, and code Playground

by envira

HTML

-<div id="ultimenu" class="ultimenu red">
				<a href="#" class="ultimenu-brand">ultimenu</a>
				<ul class="ultimenu-menu">
					<li><a href="#">Regular dropdown</a>
						<ul class="dropdown">
							<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>
								<ul class="dropdown">
									<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</a>
										<ul class="dropdown">
											<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</a>
						<ul class="dropdown">
							<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 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>
						</ul>
					</li>
					<li><a href="#">With Long text</a>
						<ul class="dropdown">
							<li><a href="#">This is a dropdown item with a long text</a></li>
							<li><a href="#">This is a dropdown item with a long...

CSS

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

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

.ultimenu 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
}

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

.ultimenu-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
}

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

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

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

.ultimenu-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
}

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

.ultimenu-menu ul.dropdown,
.ultimenu-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
}

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

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

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

JavaScript

(function($){

  jQuery.fn.ultimenu = 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: false,
      scrollableMaxHeight: 400
    }, options);

    // variables
    var menu_container = $(this);
    var menu = $(menu_container).children(".ultimenu-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("ultimenu-right");
    }

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

    // responsive behavior
    if(settings.responsive){
      $(menu_container).addClass("ultimenu-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",...