JSFiddle - React, Tailwind, and code Playground

HTML

<header>
		<div class="nav wrapper">
			<div class="logo-min">
				<a href="#"><img src="images/logo_min.png"></a>
			</div>
			<div class="menu">
				<div class="menu__icon">
				      <span>Features</span>
				      <span>About</span>
				      <span>Pricing</span>
				      <span>Contact</span>
				</div>
				<ul class="menu__links">
					<li><a href="#">Features</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Pricing</a></li>
					<li><a href="#">Reviews</a></li>
					<li><a href="#">contact</a></li>
				</ul>
				
				
			</div>
		</div>
		<figure class="bg-img">
			<div class="axit wrapper">
				<div class="axit-text">
					<img src="images/logo_big.png">
					<H1>MODERN AXURE TEMPLATE for BEAUTIFUL PROTOTYPES 
					</H1>
					<hr>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
						euismod bibendum laoreet. Proin gravida dolor sit amet lacus
						accumsan et viverra justo commodo.
					</p>
					<div class="button"><a href="#">Download</a></div> 
				</div>
				<div class="signup">
					<div class="try">
						Try your <span>FREE</span> Trial Today
					</div>
					<div class="form">
						 <input  name="name" type="text" id="user_name" value="Name" class="colorform" />
						<input name="email" type="text" id="user_email" value="email" class="colorform"/>
						<input name="password" type="text" id="user_password" value="password" class="colorform pas-top"/>
					</div>
					<div class="get">
						<a href="#">Get started</a>
					</div>
				</div>
			</div>
		</figure>
		<div class="social">
			<div class="wrapper">
				<div class="social-text">
					<h2>Social Media</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p>
				</div>
				<div class="social-media">
					<ul>
						<li><a href="#" class="fb-ico icons"></a></li>
						<li><a href="#" class="tw-ico icons"></a></li>
						<li><a href="#" class="g-ico icons"></a></li>
						<li><a href="#"...

CSS

*
{
	margin: 0;
	padding: 0;
}
header
{
	background: #000;
	font-family: 'Open Sans', sans-serif;
	width: 1400px;
}
.wrapper 
{
	width: 1100px;
	text-align: center;
	margin: 0 auto;
}
.nav
{
	height: 70px;
}
.nav img
{
	padding-top: 20px;
}
.logo-min, .axit-text
{
	float: left;
}
.menu
{
	float: right;
	padding-top: 25px;
}
.menu ul
{
	display: inline;
}
.menu ul li
{
	display: inline-block;
	direction: none;
	padding-left: 45px;
}
.menu a
{
	color: #fff;
	text-transform: capitalize;
	font-size: 14px;
	text-decoration: none;
	font-weight: normal;
}
.menu a:hover,.button a:hover,.get a:hover
{
	text-decoration: underline;
}
.menu__icon {
   display: none;
   width: 45px;
   height: 35px;
   position: relative;
   cursor: pointer;
}

.menu__icon span {
  display: block;
  position: absolute;
  height: 9px;
  width: 100%;
  background: #333333;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.menu__icon span:nth-child(1) {
  top: 0px;
}

.menu__icon span:nth-child(2), .menu__icon span:nth-child(3) {
  top: 13px;
}

.menu__icon span:nth-child(4) {
  top: 26px;
 }
.menu.menu_state_open .menu__icon span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

.menu.menu_state_open .menu__icon span:nth-child(2) {
  transform: rotate(45deg);
}

.menu.menu_state_open  .menu__icon span:nth-child(3) {
  transform: rotate(-45deg);
}

.menu.menu_state_open  .menu__icon span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

.menu.menu_state_open .menu__links {
  opacity: 1;  
}
figure.bg-img
{
  background: url(../images/image.jpg);
  height: 645px;
  background-size: cover;
  -moz-background-size: cover;  /* Firefox 3.6*/ 
  background-position: center;  /* Internet Explorer 7/8 */
}
.axit
{
	text-align: left;
	padding-top: 110px;
}
.axit-text
{
	width: 550px;
	font-family: 'Raleway', sans-serif;
	color: #fff;
}
.axit-text H1
{
	text-transform: uppercase;
	font-size: 36px;
	margin: 30px 0;
	font-weight:...

JavaScript

(function($){
		  $(function() {
		    $('.menu__icon').on('click', function() {
		      $(this).parent().toggleClass('menu_state_open');
		    });
		  });
})(jQuery);