JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Meteor</title>
		<link rel="icon" href="img/M.png">
		<link href="css/hover-min.css" rel="stylesheet">
		
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
		<link rel="stylesheet" href="css/main.css">
		<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
		<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
		
	</head>
	<body>
		
			<div class="one" data-vide-bg="video/mountian">

				
					<div class="container" >
						
						<div id="nav-icon2">
							<span></span>
							<span></span>
							<span></span>
							<span></span>
							<span></span>
							<span></span>
						</div>
								
							
						
						
						<div class="row">
							<div class=" col-lg-2 col-md-2 col-sm-2">
								<div class="logo">
									<img src="img/white_logo.png" alt="white_logo">
								</div>
							</div>	


							<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-0 col-sm-10">
								
									<div class="menu">
									
										<nav class="main">

											<ul class="menu-list">
												<li class="hvr-grow"><a href="">home</a></li>
												<li class="hvr-grow"><a href="">about us</a></li>
												<li class="hvr-grow"><a href=""> portfolio</a></li>
												<li class="hvr-grow"><a href="">blog</a></li>
												<li...

CSS

html {
  font-size: 10px;
}
body {
  font-family: "Open Sans";
  background-color: #f4f4f4;
}
iframe {
  width: 100%;
  height: 30rem;
  border: none;
}
input {
  outline: none;
}
section {
  padding: 10rem 0;
  margin-right: 0;
}
img {
  max-width: 100%;
}
button {
  background-color: #a2cf8e;
  cursor: pointer;
  border: none;
  border-radius: 30px;
  padding: 1.2rem;
  text-transform: uppercase;
  font-weight: bold;
  color: white;
  outline: none;
}
.comment {
  text-transform: none;
  color: white;
  font-size: 18px;
  text-align: left;
  margin: 25px 0 7px 20px;
  font-weight: bold;
}
ul li {
  list-style: none;
}
h1,
h2,
h3 {
  text-transform: uppercase;
}
.titular {
  text-align: center;
  margin: 6rem 0 15rem 0;
}
.titular h2 {
  font-size: 18px;
  color: #121212;
  font-weight: bold;
}
.titular hr {
  width: 70px;
  height: 3px;
  background-color: #121212;
  margin-top: 5px;
  border: none;
}
.big-photo {
  display: none;
}
.white h2 {
  color: white;
}
.white hr {
  background-color: white;
}
.one {
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100vh;
}
.one p {
  margin-bottom: 3rem;
}
.logo img {
  margin-top: 2rem;
}
.menu {
  text-align: right;
}
nav ul {
  margin: 3rem 0 0 8rem;
}
nav ul li {
  display: flex;
  text-transform: uppercase;
  font-size: 1.4rem;
  margin-left: 3rem;
}
nav ul li a {
  color: #FFFAFA;
}
nav ul li a:hover {
  color: white;
  text-decoration: none;
}
.responsive {
  text-align: center;
  margin: 20rem 0;
}
.responsive h1 {
  color: white;
  font-weight: bold;
}
.responsive h2 {
  margin-bottom: -1.3rem;
  font-size: 13px;
  font-weight: lighter;
  color: #ffffff;
}
.responsive p {
  font-size: 13px;
  line-height: 2.1;
  color: white;
}
/* Section two */
.features {
  text-align: center;
}
.features .block {
  border: none;
  background-color: #fbfbfb;
  border-radius: 2px;
  -webkit-box-shadow: 7px 12px 21px 0px rgba(0, 0, 0, 0.17);
  box-shadow: 7px 12px 21px 0px rgba(0, 0, 0,...

JavaScript

$(document).ready(function($) {
	$('.popup-btn').on('click', function() {
		$('.popup').fadeIn();
		
	});

	$('.popup-close').on('click', function() {
		$('.popup').fadeOut();
		
	});

	$('#nav-icon2').click(function(){
		$(this).toggleClass('open');
	});

	$('#nav-icon2').on('click', function(){
		$('.menu-list').toggle();

	});
});