JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="rmm style preview" style="max-width: 546px;">
  <div class="rmm-toggled rmm-view" style="display: none;">
    <div class="rmm-toggled-controls">
      <div class="rmm-toggled-title">Menu</div>
      <div class="rmm-toggled-button"><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div>
    </div>
  </div>
  <ul class="rmm-menu">
    <li>
      <a href="#" class="rmm-dropdown">Books</a>
      <ul class="rmm-submenu">
        <li class="rmm-back"><a href="#">back</a></li>
        <li>
          <a href="#">Audiobooks</a>
        </li>
        <li>
          <a href="#">Cookbooks</a>
        </li>
        <li>
          <a href="#">Catalogs</a>
        </li>
        <li>
          <a href="#" class="rmm-dropdown">Other</a>
          <ul class="rmm-submenu">
            <li class="rmm-back"><a href="#">back</a></li>
            <li><a href="#">Other 1</a></li>
            <li><a href="#">Other 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Dvds</a>
    </li>
    <li>
      <a href="#" class="rmm-dropdown">Music</a>
      <ul class="rmm-submenu">
        <li class="rmm-back"><a href="#">back</a></li>
        <li><a href="#">Cassettes</a></li>
        <li><a href="#">CD</a></li>
        <li><a href="#">Records</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Video games</a>
    </li>
  </ul>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);
@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon.eot');
  src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.ttf') format('truetype'), url('../fonts/icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}


/* minimal styles for that navi */

.rmm {
  margin: 0 auto;
}

.rmm ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  background: #000;
}

.rmm ul:after {
  content: "";
  clear: both;
  display: block;
}

.rmm ul li {
  float: left;
}

.rmm ul li:hover {
  background: #202020;
}

.rmm ul li:hover > ul {
  display: block;
}

.rmm ul li:hover a {
  color: #fff;
}

.rmm ul li a {
  color: #fff;
  display: block;
  text-decoration: none;
}

.rmm ul ul {
  display: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
}

.rmm ul ul li {
  float: none;
  position: relative;
}

.rmm ul ul li a {
  color: #fff;
}

.rmm ul ul li a:hover {
  background: #202020;
}

.rmm ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
}


/* mobile menu header button */

.rmm-toggled {
  width: 100%;
  background-color: #555555;
  min-height: 50px;
  margin: 0 auto;
  display: none;
}

.rmm-closed ~ .rmm-mobile {
  display: none!important;
}

.rmm-toggled-controls {
  width: 100%;
}

.rmm-toggled-title {
  width: 60%;
  float: left;
  font-size: 27px;
  color: #fff;
  font-weight: 600;
  display: block;
  padding: 8px 0;
  text-decoration: none;
  text-transform: uppercase;
  text-align: left;
  padding-left: 35px;
}

.rmm-toggled-button {
  width: 20%;
  float: left;
  margin-top: 3px;
  display: block;
  width: 32px;
  padding: 0 !important;
  margin: 10px 10px 0 0;
  border: 1px solid #fff;
  border-radius: 3px;
  float: right;
}

.rmm-toggled-button span {
  float: left;
  display: block;
  margin: 3px...

JavaScript

/*

Responsive Mobile Menu v1.1
Plugin URI: responsivemultimenu.com

Author: Adam Wysocki
Author URI: http://oncebuilder.com

License: http://opensource.org/licenses/MIT

*/

function adaptMenu() {
  /* 	toggle menu on resize */
  $('.rmm').each(function() {
    // initialize vars
    var maxWidth = 0;
    var width = 0;

    // width of menu list (non-toggled)
    $('.rmm-menu').children("li").each(function() {
      if ($(this).parent().hasClass('rmm-menu')) {
        width = $(this).outerWidth(); //outerWidth();
        if (width > 0) {
          maxWidth += width;
        }
      }
    });

    // compare width
    var width = $('.rmm').css('max-width');
    width = width.replace('px', '');

    if ($(this).parent().width() > width) {
      $('.rmm-menu').removeClass("rmm-mobile");

      //remove all classes from mobile verion
      $(".rmm-menu ul").removeClass("rmm-subview");
      $(".rmm-menu li").removeClass("rmm-subover-hidden");
      $(".rmm-menu li").removeClass("rmm-subover-visible");
      $(".rmm-menu a").removeClass("rmm-subover-header");

      $(".rmm-toggled").removeClass("rmm-closed");
      $('.rmm-toggled').hide();

      //$('.rmm-toggled').removeClass("rmm-view");
      //$('.rmm-toggled').addClass("rmm-closed");
    } else {
      $('.rmm-menu').addClass("rmm-mobile");
      $('.rmm-toggled').show();
      $('.rmm-toggled').addClass("rmm-closed");

      //$('.rmm-toggled').removeClass("rmm-closed");
    }
  });
}

function responsiveMultiMenu() {
  $('.rmm').each(function() {
    // create mobile menu classes here to light up HTML
    $(this).find("ul").addClass("rmm-submenu");
    $(this).find("ul:first").addClass("rmm-menu");
    $(this).find("ul:first").removeClass("rmm-submenu");
    $(this).find('.rmm-submenu').prepend('<li class="rmm-back"><a href="#">back</a></li>');
    $(this).find("ul").prev().addClass("rmm-dropdown");

    // initialize vars
    var maxWidth = 0;
    var width = 0;

    // width of menu list (non-toggled)
  ...