JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery.min.js"></script>
<div class="rmm style">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li>
      <a href="#" class="a">Projects</a>
      <ul class="b">
        <li>
          <a href="#">Ongoing projects</a>
          <ul>
            <li><a href="opus_highway.html">Opus Highway Apartments</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Upcoming projects</a>
          <ul>
            <li><a href="opus_highway.html">Opus Highway Apartments</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Completed projects</a>
          <ul>
            <li><a href="Twingle Office.html">Twingle Office Apartments</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="career.html">Career</a>
    </li>
    <li>
      <a href="Media.html">Media</a>
    </li>
    <li>
      <a href="contactus.html">Contact Us</a>
    </li>
  </ul>
</div>

CSS

/* minimal styles for that navi */

.rmm {
  margin: 0 auto;
  float: right;
}

.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 !important;
}

.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: 50px;
  background-color: #555555;
  min-height: 50px;
  margin: 0 auto;
  display: none;
  float: right;
}

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

.rmm-toggled-controls {
  width: 50px;
  float: right;
}

.rmm-toggled-title {
  width: 60%;
  float: left;
  font-size: 27px;
  color: #fff;
  font-weight: 600;
  display: none;
  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 6px;
  height: 3px;
  background: white;
  width: 20px;
}


/* normalny back button visible only on mobiles  */

.rmm .rmm-back {
  display: none;
  font-size: 12px;
}

.rmm .rmm-back:after {
  display: none;
}

.rmm .rmm-back a:after {
  font-family: 'icomoon';
  speak: none;
  -webkit-font-smoothing: antialiased;
  content: "\e000";
  position: relative;
  display:...

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)
  ...