JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>Chezzles</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="css/normalize.css" type="text/css" />
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		<link rel="stylesheet" href="css/responsive.css" type="text/css"/>
	</head>
	<body>
		<header class="header">
			<a href="#" class="main-navbar-heading">Chezzles</a>
			<div class="navbar">
				<ul class="main-navbar">
					<li><a href="#"><i class="fa fa-home fa-fw" style="color:#999; margin-right: 2px;"></i>Home</a></li>
					<li><a href="#"><i class="fa fa-user fa-fw" style="color:#999; margin-right: 2px;"></i>About</a></li>
					<li><a href="#"><i class="fa fa-phone fa-fw" style="color:#999; margin-right: 2px;"></i>Contact</a></li>
					<li><a href="#"><i class="fa fa-star fa-fw" style="color:#999; margin-right: 2px;"></i>Summer</a></li>
				</ul>
				<ul class="sub-navbar">
					<li><a href="#"><i class="fa fa-rss fa-fw" style="color:#999; margin-right: 2px;"></i>RSS</a></li>
					<li><a href="#"><i class="fa fa-twitter fa-fw" style="color:#999; margin-right: 2px;"></i>Twitter</a></li>
					<li><a href="#"><i class="fa fa-facebook fa-fw" style="color:#999; margin-right: 2px;"></i>Facebook</a></li>
					<li><a href="#"><i class="fa fa-instagram fa-fw" style="color:#999; margin-right: 2px;"></i>Instagram</a></li>
				</ul>
			</div>
		</header>
		<header class="sub-header">
			<a href="#" class="main-navbar-heading-2">Chezzles</a>
			<div class="dropdown">
				<i class="fa fa-bars fa-fw dropbtn" style="font-size: 24px;"></i>
		      	<div class="dropdown-content">
		      		<div class="dropdown-content-1">
						<a href="#"><i class="fa fa-home fa-fw" style="color:#999; margin-right: 2px;"></i>Home</a>
						<a href="#"><i class="fa fa-user fa-fw" style="color:#999;...

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:400,300italic,300,200italic,200,100italic,100,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic&subset=latin,latin-ext);


p {
    font-family: sans-serif;
}

.header {
    width: 17.3%;
    background-color: #191818;
    position: fixed;
    height: 100%;
}

.main-navbar-heading {
    display: block;
    margin-top: 20px;
    color: #fff;
    margin-left: 20px;
    text-decoration: none;
    font-family: Raleway;
}

.hr {
    border-bottom: 1px solid #7B68EE;    
}

.main-navbar {
    border-top: 1px solid #7B68EE;
    border-bottom: 1px solid #7B68EE;
}

.sub-navbar {
    margin-top: -10px;
}

.main-navbar, .sub-navbar {
    padding-left: 20px;
}

.main-navbar li, .sub-navbar li {
    list-style-type: none;
    width: 100%;
    margin-left: -20px;
    padding-left: 20px;
}

.main-navbar li a, .sub-navbar li a {
    font-family: sans-serif;
    text-decoration: none;
    font-size: 0.9em;
    line-height: 3em;
    color: #999;
}

section {
    width: 82.7%;
    position: absolute;
    right: 0;
}

.main-heading {
    text-align: center;
    font-family: Raleway;
    font-size: 3em;
    font-weight: 300;
    color: #7B68EE;
    margin-bottom: 9.6px;
}

.sub-heading {
    text-align: center;
    font-family: Raleway;
    margin-top: 0;
    font-size: 1.5rem;
    font-weight: 300;
    color: #ccc;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

.main-content {
    margin-left: 5%;
}

.main-content-heading {
    text-decoration: none;
    color: #3b8bba;
}

.content {
    color: #777;
    width: 80%;
    line-height: 1.6em;
}

.main-navbar li:hover, .sub-navbar li:hover {
    text-decoration: underline;
    background-color: #008080;
}

.main-content-heading:visited{
    color: #265778;
}

.summer_prgramme_link:visited {
    color: #265778;
}

.summer_prgramme_link {
    color: #3b8bba;
    text-decoration: none;
}

.sub-header {
    display: none;
}

@media...

JavaScript

$('.dropbtn').click( function() {
       $('.sub-header .dropdown .dropdown-content').toggle('slow');
    } );