JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
		<label for="show-menu" class="show-menu">
			<div class="burger">
			  <svg id="svg-burger" version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" xml:space="preserve">
				<g>
				  <rect class="top" y="20" fill="#454646" width="100" height="10" />
				  <rect class="middle" y="45" fill="#454646" width="100" height="10" />
				  <rect class="bottom" y="70" fill="#454646" width="100" height="10" />
				</g>
			  </svg>
			</div>
		</label>
		<input type="checkbox" id="show-menu" role="button">
			<ul id="menu">
			<li><a href="#">Home</a></li>
			<li>
				<a href="#">About ￬</a>
				<ul class="hidden">
					<li><a href="#">Who We Are</a></li>
					<li><a href="#">What We Do</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Portfolio ￬</a>
				<ul class="hidden">
					<li><a href="#">Photography</a></li>
					<li><a href="#">Web & User Interface Design</a></li>
					<li><a href="#">Illustration</a></li>
				</ul>
			</li>
			<li><a href="#">News</a></li>
			<li><a href="#">Contact</a></li>
		</ul>

CSS

/*Reset CSS from http://meyerweb.com/eric/tools/css/reset/ */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

body {
	font-family: 'Oxygen', sans-serif;;
}
/*Strip the ul of padding and list styling*/
nav ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
}

/*Create a horizontal list with spacing*/
nav li {
	display:inline-block;
	float: left;
	margin-right: 1px;
}

/*Style for menu links*/
nav li a {
	display:block;
	min-width:140px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	color: #fff;
	background: #2f3036;
	text-decoration: none;
}

/*Hover state for top level links*/
nav li:hover a {
	background: #19c589;
}

/*Style for dropdown links*/
nav li:hover ul a {
	background: #f3f3f3;
	color: #2f3036;
	height: 40px;
	line-height: 40px;
}

/*Hover state for dropdown links*/
nav li:hover ul a:hover {
	background: #19c589;
	color: #fff;
}

/*Hide dropdown links until they are needed*/
nav li ul {
	display: none;
}

/*Make dropdown links vertical*/
nav li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
nav li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

/*Display the dropdown on hover*/
nav ul li a:hover + .hidden, .hidden:hover {
	display: block;
}

/*Style 'show menu' label button and hide it...

JavaScript

$(document).ready(function() {
	(function () {
		$('.burger').on('click', function (e) {
			if ($(this).hasClass('close')) {
				return $(this).removeClass('close').addClass('open');
			} else {
				return $(this).addClass('close').removeClass('open');
			}
		});
	}.call(this));
});