JSFiddle - React, Tailwind, and code Playground

by alex25

HTML

<body>
	<div class="wrapper">
		<header class="header fixed">
			<div class="header-color fix">
				<div class="hh">
					<div class="mob-menu left">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</div>
					<div class="logo">
						<a href="#1" title="Logo" class="current">qTest</a>
					</div>
					<div class="top-menu">
						<ul class="nav-left" id="nav">
							<li><a href="#1" class="current">section1</a></li>
							<li><a href="#2" class="">section2</a></li>
							<li><a href="#3" class="">section3</a></li>
						</ul>							
					</div>
				</div><!-- hh end -->
			</div><!-- header-wrap end -->
		</header>
	<div class="container">
		<section class="land1 center" id="1">
			<div class="text"></div>
		</section>
		<section class="land2 center" id="2">
			<div class="text"></div>
		</section>
		<section class="land3 center" id="3">
			<div class="text"></div>
		</section>
		
		
	</div><!-- container end -->

<footer class="footer">
	<div class="footer-wrap fix">
		<div class="ff">
			
			
		</div><!-- ff end -->
	</div><!-- footer-wrap end -->
</footer>
</div><!-- wrapper end -->

</body>

CSS

/*
Author:        Alexey Semenov 
Author URI:    http://keksus.com/
License:       GPL2

Copyright 2017 Alexey Semenov (email : [email protected])
*/

/*-------------------------------------------------------*/
/*  = Global css styles 
/*-------------------------------------------------------*/
*{
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
}
html{
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
}
.fix{
    margin:0 auto;
    max-width:1024px;
}
.wrapper{ 
    position: relative;
}
.hh,.ff{
    padding: 0px 15px;
}
.cc{
    padding: 10px 15px;
    overflow: hidden;
}
.content{
    width: 75%;
}
.sidebar{
    width: 25%;
}
/*-------------------------------------------------------*/
/*  = Helper styles 
/*-------------------------------------------------------*/
.left{
    float: left;
}
.right{
    float: right;
}
.none{
    float: none;
}
.clear{
    clear: both;
}
.image{
    float: left;
    position: relative;
}
.img-responsive{
    display: block;
    height: auto;
    max-width: 100% !important;
}
.center{
    /*display: block;*/
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}
.row:after, .row:before {
    content: " ";
    display: table;
}
.row:after {
    clear: both;
}
/*-------------------------------------------------------*/
/*  = Main template css styles
/*-------------------------------------------------------*/
body{
    font: 14px/22px 'Libre Franklin', 'Open Sans', Tahoma, Verdana, sans-serif;
}
.wrapper{
    box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2) !important;
}
a{
    color: #000;
    text-decoration: none;
}
h1,h2,h3,h4,h5,h6{
    font: 40px 'Libre Franklin','Open Sans',Tahoma,Verdana,sans-serif;
    padding: 10px 0;
}
p{}
/*-------------------------------------------------------*/
/*  = Default Colors
/*-------------------------------------------------------*/
body{
    background:...

JavaScript

jQuery(document).ready( function($){
  // left mobile menu
	$(".mob-menu").click(function(){
		$(this).toggleClass("open"); // transform mobile menu icon to X
		$(".nav-left,.wrapper,.header").toggleClass("openleft"); 
	});
  
}); // end Jquery