JSFiddle - React, Tailwind, and code Playground

by jarod51

HTML

<div id="banner">
				
				<ul>
					<li>
						<a href="#home">Home</a>
					</li>  
					<li>   
						<a href="#newsletter">Newsletter</a>
					</li>  
					<li>   
						<a href="#directions">Directions &amp; Opening Hours</a>
					</li>  
					<li>   
						<a href="#contact">Contact us</a>
					</li>
				</ul>
		</div>
		<!--end of the menu-->
		
		<!--arrows nav-->
		<div id="slider-left" class="slider-nav"></div>
<div id="slider-right" class="slider-nav"></div>
		<!--end arrows-->

		<div id="wrap">
		

		
			<div id="home" class="panel item1">
			<div class="inner inner1"></div>
					<h2>
						Welcome
					</h2>
					<p>
						You betcha: this <em>is</em> the kicks store you've been looking for.
					</p>
					<p>
						We specialise in collector brands, including <strong>Abibas</strong>, <strong>Deebok</strong>, <strong>Luma</strong>, <strong>Ronverse</strong>, and of course the full range of <strong>Niku</strong> <strong>Spare Boredom</strong> and <strong>Wear Remorse One</strong>.
					</p>
					
			</div>
			
			<div id="slide">
			<div id="newsletter" class="panel item2">
			<div class="inner inner2"></div>
		    <div class="inner-lev1 inner2a"></div>
		    <div class="inner-lev2 inner2b"></div>
					<h2>
						Newsletter
					</h2>
			</div>
			</div>		

			<div id="directions" class="panel">
					<h2>
						Directions and opening hours
					</h2>
					
			</div>
			
			<div id="contact" class="panel">
					<h2>
						Contact us
					</h2>
					
					
					

			</div>
		</div><!--end of wrap-->

CSS

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,
q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}


/* specific to this page */


body {
	/*background: #000 url('images/paint.jpg') top left no-repeat scroll;*/
	color: #eee;
	font-size: 15px;
	font-family: sans-serif;
}

p {
	margin: 0 0 15px 0;
}

a:link {
	color: #790;
}

strong, h2, h3 {
	color: #fff;
	font-weight: bold;
}

em {
	font-style: italic;
}

h2 {
	font-size: 18px;
}




#banner {
	position: fixed;
	width: 100%;
	padding: 0 30px;
	line-height: 45px;
	background-color: #000;
	background-color: rgba(0,0,0,0.5);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000)";
	/*let's add a z-index:10 in order to have the parallax effect when we click on items menu */
	z-index:10;
}

#banner h1 {
	margin-top: 60px;
	font-weight: bold;
	text-transform: lowercase;
	font-size: 18px;
	color: #fff;
	display: inline;
	line-height: 45px;
	
}

#banner h1 span {
	color: #ab5;
}

#banner ul {
	display: inline;
}

#banner...

JavaScript

$(document).ready(function () {
    /* on left button click scroll to the previous sibling of the current visible slide */
    $('#slider-left').click(function () {
        var $prev = $('#slide').prev();

        if ($prev.length) {
            $('#slide').animate({
                scrollLeft: $prev.position().left
            }, 'slow');
        }
    });
    /* on right button click scroll to the next sibling of the current visible slide */
    $('#slider-right').click(function () {
        var $next = $('.slide .shown').next();

        if ($next.length) {
            $('.slider').animate({
                scrollLeft: $next.position().left
            }, 'slow');
        }
    });
});
$(document).ready(function() {
	
	   $("body").addClass("has-js");
		$("form").bind("submit",function(event){
           event.preventDefault();
		});
       $("#banner a").bind("click",function(event){
           event.preventDefault();
           var target = $(this).attr("href");
           $("html, body").stop().animate({
               scrollLeft: $(target).offset().left,
			   scrollTop: $(target).offset().top
           }, 3000); /*first value 1200*/
       });
	});