JSFiddle - React, Tailwind, and code Playground

by apaul34208

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;
	display: none;
	overflow: hidden;
}

.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;
}
.nav-menu li a:hover,.nav-menu li a:focus{background:#272727;}
.toggled-on li a:active{background:#2A8A15;}

JavaScript

$(function() {
    $('.menu-toggle').click(function(){
        if($('.nav-menu').is(':hidden')){
            $('.nav-menu').slideDown();}
        else{$('.nav-menu').slideUp();}
    });
});