JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<header>
		<nav id="site-navigation" class="navigation main-navigation" role="navigation">
			<h3 class="menu-toggle">Menu</h3>
			<div class="nav-menu">
				<ul>
					<li><a href="#">item1</a></li>
					<li><a href="#">item2</a></li>
					<li><a href="#">item3</a></li>
					<li><a href="#">item4</a></li>
					<li><a href="#">item5</a></li>
				</ul>
			</div>
		</nav><!-- #site-navigation -->
	</header><!-- #masthead -->
		<div>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, consequuntur, nemo exercitationem in eum adipisci non eligendi sed ratione delectus nam quisquam ipsa debitis molestiae assumenda facere odit laborum officiis!</p>
			<p>Quos, beatae, perspiciatis a tenetur quis temporibus minus fuga dolore quia ea quibusdam autem sed nobis iusto eveniet nihil obcaecati officiis nulla dolores eius molestias incidunt quaerat assumenda veritatis magni!</p>
			<p>Itaque, unde, velit, eos, consequatur incidunt eum magnam veniam cumque quas rem vel delectus necessitatibus odit blanditiis beatae facere ducimus? Vitae, magni iure eligendi provident accusamus iste perferendis ipsum facere.</p>
		</div>
</body>

CSS

html {
	font-size: 100%;
	overflow-y: scroll;
}
body {
	max-width: 860px;
	margin: 0 auto;
	font-family: Helvetica, sans-serif;
}
.main-navigation {
	clear: both;
	min-height: 45px;
	margin-top: 30px;
	position: relative;
}
.menu-toggle {
	cursor: pointer;
	display: inline-block;
	font: bold 16px/1.3;
	margin: 0;
	padding: 10px;
	color: #fff;
	background-color: #1e1e1e;
}

.nav-menu {
	margin: 0;
	background-color: #1e1e1e;
	max-height: 0;
	display: block;
	clear: both;
	overflow: hidden;
	-moz-transition:all 350ms cubic-bezier(.42,0,.58,1);
	-ms-transition:all 350ms cubic-bezier(.42,0,.58,1);
	-o-transition:all 350ms cubic-bezier(.42,0,.58,1);
	-webkit-transition:all 350ms cubic-bezier(.42,0,.58,1);
	transition:all 350ms cubic-bezier(.42,0,.58,1);
}
.toggled-on .nav-menu {
	display: block;
	max-height: 480px;
    height:auto;
}

.nav-menu > ul {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
}
.nav-menu li {
	display: block;
	padding: 10px;
}
.nav-menu li a {
	display: block;
	padding:10px;color:#fff;line-height:1;
	text-decoration: none;
}
.toggled-on li a:hover,.toggled-on li a:focus{background:#272727;}
.toggled-on li a:active{background:#2A8A15;}

.nav-menu>ul {
	/*display: none;*/
}

JavaScript

( function( $ ) {
	/**
	 * Enables menu toggle for small screens.
	 */
	( function() {
		var nav = $( '#site-navigation' ), button, menu;
		if ( ! nav )
			return;

		button = nav.find( '.menu-toggle' );
		menu   = nav.find( '.nav-menu' );
		if ( ! button )
			return;

		// Hide button if menu is missing or empty.
		if ( ! menu || ! menu.children().length ) {
			button.hide();
			return;
		}

        $( '.menu-toggle' ).on( 'click', function() {
            if(nav.hasClass('toggled-on')) menu.css('maxHeight', 0);
            else menu.css('maxHeight', '480px'); 
		});
        menu.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
            nav.toggleClass( 'toggled-on' );
        });        
	} )();
} )( jQuery );