JSFiddle - React, Tailwind, and code Playground

HTML

<header id="header">
	<div id="header-area">
        <nav id="menu">        
            <input type="checkbox" id="toggle-nav"/>
                <label id="toggle-nav-label" for="toggle-nav">
                        <div id="nav-icon">
                              <span></span>
                              <span></span>
                              <span></span>
                        </div>
                 </label>  
                <script>
					$(document).ready(function(){
					  $('#nav-icon').click(function(){
							$(this).toggleClass('open');
					   });
					});
				</script>
                <div class="menu-container">
                    <div class="menu-area">
                        <ul>
                            <li><a href="#">Case Studies</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Journal</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                        <div class="menu-footer">
                        	Footer
                        </div>
                    </div>
                </div>
       </nav>
    </div>
</header>
<div id="wrapper">
	<main>
       

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis, nunc aliquet vulputate tempus, diam ante semper dui, id porta velit neque quis libero. Sed eget enim vehicula augue aliquam efficitur. Aliquam nec mauris nulla. Nunc viverra velit et lectus vulputate blandit. Suspendisse dignissim hendrerit ex sit amet euismod. Morbi nec auctor dui. In sollicitudin sem in dolor tempus, in dictum ligula finibus. Vestibulum auctor turpis quis aliquam consectetur. Donec ullamcorper lacinia odio, et sodales odio vestibulum at. Phasellus pharetra metus eget augue tempus, quis vestibulum mauris sollicitudin. Phasellus eget ullamcorper sapien. Sed dolor metus, pellentesque quis metus vel, eleifend tincidunt mauris.

Aliquam erat volutpat. Vivamus sit amet libero...

CSS

/*Header */
header {
	position: fixed;
	width: 100%;
	height: 80px;
	background-color:rgba(255,255,255,1.00);
	color: #000;
	top: 0;
	padding: 0;
	z-index: 8000;
}
header a:link {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	text-decoration: none;
	min-width: 100%;
	color: #000;
}
header a:hover {
	color: #eaab00;
}
#header-area {
	max-width: 1200px;
	padding-left: 3%;
	margin: 0	
}
.header-logo {
	font-family:'Neue Helvetica W01', sans-serif;
	font-size: 15px;
	letter-spacing: 3px;
	margin-top: 35px;
	margin-left: 3px;
	display: inline-block;
	cursor: pointer;
}
/* Nav */
nav {
	float: right;
	margin: 0;
	padding: 0;
	display: inline-block;
}
#toggle-nav-label {
	text-align: center;
	display: block;
	cursor: pointer;
	position: relative;
	z-index: 8500;
	width: 30px;
	height: 25px;
	margin-top: 40px;
	background-color: transparent
}
#menu .menu-container {
	position: fixed;
	overflow: hidden;
	z-index: 1;
	opacity: 0;
	width: 100%;
	height: 101%;
	left: 0px;
	top: 0px;
	background: #e39c37;
	-webkit-transition: all 0.5s ease-in-out; 
	-moz-transition: all 0.5s ease-in-out; 
	-o-transition: all 0.5s ease-in-out; 
	transition: all 0.5s ease-in-out;
}
#menu .menu-container .menu-area {
	padding-left: 4%	
}
#menu ul {
	position: absolute;
	top: 40%
}
#menu ul li { 
	display: block;
	font-size: 50px;
	line-height: 55px;
	font-weight: 600;
	margin: 0px 0px 9px 0px;
}
#menu li a {
	text-decoration: none;
	color: #000;
}
#menu .menu-footer {
	position: absolute;
	bottom: 45px;
	width: 90%;	
}
#toggle-nav { display: none; }
#toggle-nav:checked ~ .menu-container { 
	opacity: 1;
	z-index: 400;
}
#nav-icon {
  width: 30px;
  height: 25px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
 ...