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">
						<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

/*-------------------------------------------------------*/
/*  = 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;
}
/*-------------------------------------------------------*/
/*  = Default Colors
/*-------------------------------------------------------*/
body{
    background: #beeb9f;
}
.header{
    background: #beeb9f;
}
.fixed{
    background: #beeb9f;
}
.footer{
    background: #beeb9f;
}
.wrapper{
    background: #fff8e3;
}
/*-------------------------------------------------------*/
/*  = Footer to...

JavaScript

jQuery(document).ready( function($){
  // left mobile menu
  if (!$(this).hasClass("mob-menu left")){
		$(".nav").removeClass("nav").addClass("nav-left");
		$(".mob-menu").removeClass("mob-menu").addClass("mob-menu left");
	}
	$(".mob-menu").click(function(){
		$(this).toggleClass("open"); // transform mobile menu icon to X
		$(".nav-left,.wrapper,.header").toggleClass("openleft"); 
	});
  
  // page scrolling 
	$(function(){
	    $("#nav li a,.logo a").on("click", function(event){
	    	event.preventDefault();
	        $("html, body").stop().animate({
	            scrollTop: $($(this).attr("href")).offset().top+2
	        }, 900);

	        // hide mobile submenu after click
	        if ($(window).width() < 769){
     			if ($(".nav").length){
     				$("#nav").slideToggle("fast");
     			}
     			if ($(".nav-left").length){
     				$(".nav-left,.wrapper,.header").toggleClass("openleft"); 
     			}
     			if ($(".nav-right").length){
     				$(".nav-right,.wrapper,.header").toggleClass("openright"); 
     			}
     			$(".mob-menu").removeClass("open");
  			} 
	    });
	});
	$(window).on("scroll", function(){
	    $("*[class^='land']").each(function(){
	        if($(window).scrollTop() >= $(this).offset().top){
	            var id = $(this).attr("id");
	            $("a").removeClass("current");
	            $("a[href=#"+ id +"]").addClass("current");
	        }
	    });
	});
  
}); // end Jquery