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>-->
<div id="cssmenu">
		<ul id="list">
			<li class='active'><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>
    <button id="prev">Previous</button>
    <button id="next">Next</button>
	</div>

<div id="wrap">
    <div id="home" class="panel item1">
        <h2>Home</h2></div>
    <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 id="directions" class="panel item2">
			<h2>directions</h2>
    </div>
        <div id="contact" class="panel">
			<h2>contact</h2>
    </div>
    
</div>

CSS

body {
			width: 8000px;
			margin: 0;
		}

		.panel {
			width: 930px;
			float: left;
			padding-left: 30px;
			padding-right: 1040px;
			margin-top: 45px;
			background: #eee;
			
		}
		
		#banner {
			position: fixed;
		}
		
		#banner ul {
			line-height: 45px;
			margin: 0 30px;
			padding: 0;
		}
		
		#banner ul li {
			display: inline;
			margin-right: 30px;
		}
#wrap {
margin-top:45px;
float: left;

}

#cssmenu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 1366px;
  position: relative;
  display: block;
  font-size: 12px;
  font-weight: bold;
  background: #f2f1f2;
  font-family: Arial, Helvetica, sans-serif;
  border-bottom: 1px solid #f2f1f2;
  zoom: 1;
}
#cssmenu ul:before {
  content: '';
  display: block;
}
#cssmenu ul:after {
  content: '';
  display: table;
  clear: both;
}
#cssmenu li {
  display: block;
  float: left;
  margin: 0;
  padding: 0 4px;
}
#cssmenu li a {
  display: block;
  float: left;
  color: #797978;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 20px 7px 20px;
  border-bottom: 3px solid transparent;
}
#cssmenu li a:hover {
  color: #6c8cb5;
  border-bottom: 3px solid #00b8fd;
}
#cssmenu li.active a {
  display: inline;
  border-bottom: 3px solid #00b8fd;
  float: left;
  margin: 0;
}
#cssmenu {
position: fixed;
}
.item1{
	background: white url(http://lorempixum.com/1024/768/city/1) 0px 0px fixed no-repeat;
}
.item2{
	background: white url(http://lorempixum.com/1024/768/city/2) 0px 0px fixed no-repeat;
	/*margin-top: 45px;*/
}
.inner,.inner-lev1,.inner-lev2{
			width:100%;
			height:100%;
			position:absolute;
			z-index:1;
			/*margin-top: 45px;*/
		}
.inner1{
	background: url(http://lorempixum.com/200/200/people/1) 400px 200px fixed no-repeat;
	
	}
	.inner2{
		background: url(http://lorempixum.com/200/200/people/2) 400px 200px fixed no-repeat;
		
	}
	.inner2a{
		background: url(http://lorempixum.com/200/200/sports/1) 500px 250px fixed no-repeat;
	}
	.inner2b{
		background:...

JavaScript

$(document).ready(function() {
		       $("#cssmenu a").bind("click",function(event){
                   
		           event.preventDefault();
		           var target = $(this).attr("href");
		           $("html, body").stop().animate({
		               scrollLeft: $(target).offset().left//,
					   //scrollTop: $(target).offset().top
		           }, 1200);
		       });
   
    
 });
var i = 0;

$(function() {
    $('#next').bind('click',function(event){
         event.preventDefault();
        var lis = $("li");
        
        i = (i+ 1) % lis.length;
        var currentLi = $(lis[i]);
        var $anchor = currentLi.children('a').attr('href');   
        console.log("I after next: " + i);
        
$("html, body").stop().animate({
		               scrollLeft: $($anchor).offset().left
					   
		           }, 1000);
		       });
  
    
 });

$(function() {
    $('#prev').bind('click',function(event){
         event.preventDefault();
        var lis = $("li");
        i = i- 1; 
        var currentLi = $(lis[i]);
        var $anchor = currentLi.children('a').attr('href');
        
$("html, body").stop().animate({
		               scrollLeft: $($anchor).offset().left
					   
		           }, 1000);
		       });
  
    
 });
 
$('a').click(function(e) {
    $('li.active').removeClass('active');
    $(this).parent().addClass('active');
    e.stopPropagation();
});
$('#next').click(function() {
    var next = $('li.active').next();
    if (next.length === 0) {
        next = $('li:first');
    }
    next.find('a').click();
});
$('#prev').click(function() {
    var prev = $('li.active').prev();
    if (prev.length === 0) {
        prev= $('li:last');
    }
    prev.find('a').click();
});