JSFiddle - React, Tailwind, and code Playground

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>
<button id="prev">Previous</button>
<button id="next">Next</button>
</div>

<div id="wrap">
    <div id="home" class="panel">
        <ul>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
        </ul>
        
        </div>
    <div id="newsletter" class="panel">
			<h2>Newsletter</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 {

float: left;

}

li {display:inline;}

JavaScript

$(document).ready(function() {
		       $("#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
		           }, 1200);
		       });
   
    
 });


/*	$('#next').click(function() {
        event.preventDefault();

            $eL=$('#home').children('div').filter(":visible");
          $('#home').children().hide();
          if($eL.next().length>0){
              $eL.next().show();
          }else{
               $('#home div')[0].show();
          }
    });*/

$(function() {
    $('#next').bind('click',function(event){
         event.preventDefault();
        var $anchor = $(this);
        
$("html, body").stop().animate({
		               scrollLeft: $($anchor).offset().left
					   
		           }, 1000);
		       });
  
    
 });