JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rmm">
            <ul>
                <li><a href='#home'>Home</a></li>
                <li><a href='#about-me'>About me</a></li>
                <li><a href='#gallery'>Gallery</a></li>
                <li><a href='#blog'>Blog</a></li>
                <li><a href='#links'>Links</a></li>
                <li><a href='#sitemap'>Sitemap</a></li> 
            </ul>
        </div>

CSS

.rmm {
	display:block;
	position:relative;
	width:100%;
	padding:0px;
	margin:0 auto !important;
	text-align: center;
	line-height:19px !important;
}
.rmm * {
	-webkit-tap-highlight-color:transparent !important;
	font-family:Arial;
}
.rmm a {
	color:#ebebeb;
	text-decoration:none;
}
/*.rmm .rmm-main-list, .rmm .rmm-main-list li {
	margin:0px;
	padding:0px;
}*/
.rmm ul {
	display:block;
	width:auto !important;
	margin:0 auto !important;
	overflow:hidden;
	list-style:none;
}
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
	display:none !important;
	height:0px !important;
	width:0px !important;
}





/*if you want the menu extends over all sceen you have to remove this selector*/
.rmm .rmm-main-list li {
	display:inline;
	padding:padding:0px;
	margin:0px !important;
}




.rmm-toggled {
	display:none;
	width:100%;
	position:relative;
	overflow:hidden;
	margin:0 auto !important;
}
.rmm-button:hover {
	cursor:pointer;
}
.rmm .rmm-toggled ul {
	display:none;
	margin:0px !important;
	padding:0px !important;
}
.rmm .rmm-toggled ul li {
	display:block;
	margin:0 auto !important;
}




/* GRAPHITE STYLE */

.rmm.graphite .rmm-main-list li a {
	display:inline-block;
	padding:8px 30px 8px 30px;
	margin:0px -3px 0px -3px;
	font-size:15px;
	text-shadow:1px 1px 1px #333333;
	background-color:#444444;
	border-left:1px solid #555555;
	background-image:url('../rmm-img/graphite-menu-bg.png');
	background-repeat:repeat-x;
}
.rmm.graphite .rmm-main-list li a:hover {
	background-image:url('../rmm-img/graphite-menu-bg-hover.png');
}
.rmm.graphite .rmm-main-list li:first-child a {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rmm.graphite .rmm-main-list li:last-child a {
	-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright:...

JavaScript

function responsiveMobileMenu() {	
		$('.rmm').each(function() {
			
			
			
			$(this).children('ul').addClass('rmm-main-list');	// mark main menu list
			
			
			var $style = $(this).attr('data-menu-style');	// get menu style
				if ( typeof $style == 'undefined' ||  $style == false )
					{
						$(this).addClass('graphite'); // set graphite style if style is not defined
					}
				else {
						$(this).addClass($style);
					}
					
					
			/* 	width of menu list (non-toggled) */
			
			var $width = 0;
				$(this).find('ul li').each(function() {
					$width += $(this).outerWidth();
				});
				
			// if modern browser
			
			if ($.support.leadingWhitespace) {
				$(this).css('max-width' , $width*1.05+'px');
			}
			// 
			else {
				$(this).css('width' , $width*1.05+'px');
			}
		
	 	});
}
function getMobileMenu() {

	/* 	build toggled dropdown menu list */
	
	$('.rmm').each(function() {	
				var menutitle = $(this).attr("data-menu-title");
				if ( menutitle == "" ) {
					menutitle = "Menu";
				}
				else if ( menutitle == undefined ) {
					menutitle = "Menu";
				}
				var $menulist = $(this).children('.rmm-main-list').html();
				var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div></div>";
				$(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");

		});
}

function adaptMenu() {
	
	/* 	toggle menu on resize */
	
	$('.rmm').each(function() {
			var $width = $(this).css('max-width');
			$width = $width.replace('px', ''); 
			/*if ( $(this).parent().width() < $width*1.05 ) {*/
				$(this).children('.rmm-toggled').show(0);
				$(this).children('.rmm-main-list').hide(0)
			/*}
			else {
				$(this).children('.rmm-main-list').show(0);
				$(this).children('.rmm-toggled').hide(0);
			}*/
		});
		
}

$(function() {

	 responsiveMobileMenu();
	 getMobileMenu();
	...