JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://tympanus.net/Development/MultiLevelPushMenu/js/classie.js"></script>
<script src="http://tympanus.net/Development/MultiLevelPushMenu/js/modernizr.custom.js"></script>
<link rel="stylesheet" href="http://tympanus.net/Development/MultiLevelPushMenu/css/component.css">
<link rel="stylesheet" href="http://tympanus.net/Development/MultiLevelPushMenu/css/demo.css">
<link rel="stylesheet" href="http://tympanus.net/Development/MultiLevelPushMenu/css/normalize.css">
<link rel="stylesheet" href="http://tympanus.net/Development/MultiLevelPushMenu/css/icons.css">
<body>
		<div class="container">
			<!-- Push Wrapper -->
			<div class="mp-pusher" id="mp-pusher">

				<!-- mp-menu -->
				<nav id="mp-menu" class="mp-menu">
					<div class="mp-level">
						<h2 class="icon icon-world">All Categories</h2>
                        <a class="mp-close" href="#">Close</a>
						<ul>
							<li class="icon icon-arrow-left">
								<a class="icon icon-display" href="#">Devices</a>
								<div class="mp-level">
									<h2 class="icon icon-display">Devices</h2>
                                    <a class="mp-close" href="#">Close</a>
									<a class="mp-back" href="#">back</a>
									<ul>
										<li class="icon icon-arrow-left">
											<a class="icon icon-phone" href="#">Mobile Phones</a>
											<div class="mp-level">
												<h2>Mobile Phones</h2>
                                                <a class="mp-close" href="#">Close</a>
												<a class="mp-back" href="#">back</a>
												<ul>
													<li><a href="#">Super Smart Phone</a></li>
													<li><a href="#">Thin Magic Mobile</a></li>
													<li><a href="#">Performance Crusher</a></li>
													<li><a href="#">Futuristic Experience</a></li>
												</ul>
											</div>
										</li>
										<li class="icon icon-arrow-left">
											<a class="icon icon-tv" href="#">Televisions</a>
											<div class="mp-level">
												<h2>Televisions</h2>
 ...

CSS

html, 
body, 
.container,
.scroller {
    height: 100%;
}
 
.scroller {
    overflow-y: scroll;
}
 
.scroller,
.scroller-inner {
    position: relative;
}
 
.container {
    position: relative;
    overflow: hidden;
    background: #34495e;
}

.mp-close {
	background: rgba(0,0,0,0.1);
	outline: none;
	color: #fff;
	letter-spacing: 1px;
	font-weight: 700;
	display: block;	
	padding: 1em;
	position: relative;
	box-shadow: inset 0 1px rgba(0,0,0,0.1);
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	transition: background 0.3s;
}


.mp-close::after {
	font-family: 'linecons';
	position: absolute;
	content: "\e033";
	right: 10px;
	font-size: 1.3em;
	color: rgba(0,0,0,0.3);
}

.mp-close:hover {background: rgba(255,255,255,0.1);}

JavaScript

/**
 * mlpushmenu.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
;( function( window ) {
	
	'use strict';

	function extend( a, b ) {
		for( var key in b ) { 
			if( b.hasOwnProperty( key ) ) {
				a[key] = b[key];
			}
		}
		return a;
	}

	// taken from https://github.com/inuyaksa/jquery.nicescroll/blob/master/jquery.nicescroll.js
	function hasParent( e, id ) {
		if (!e) return false;
		var el = e.target||e.srcElement||e||false;
		while (el && el.id != id) {
			el = el.parentNode||false;
		}
		return (el!==false);
	}

	// returns the depth of the element "e" relative to element with id=id
	// for this calculation only parents with classname = waypoint are considered
	function getLevelDepth( e, id, waypoint, cnt ) {
		cnt = cnt || 0;
		if ( e.id.indexOf( id ) >= 0 ) return cnt;
		if( classie.has( e, waypoint ) ) {
			++cnt;
		}
		return e.parentNode && getLevelDepth( e.parentNode, id, waypoint, cnt );
	}

	// http://coveroverflow.com/a/11381730/989439
	function mobilecheck() {
		var check = false;
		(function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1...