JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cssmenu">
    <ul id="list">
        <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">
        <h2>Home</h2>
    </div>
    <div id="newsletter" class="panel">
        <h2>Newsletter</h2>
    </div>
    <div id="directions" class="panel">
        <h2>Directions</h2>
    </div>
    <div id="contact" class="panel">
        <h2>Contact</h2>
    </div>
</div>
<script src="https://rawgit.com/johnpolacek/scrollorama/master/js/jquery.scrollorama.js"></script>

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;
}

JavaScript

$(document).ready(function() {		
		var scrollorama = $.scrollorama({ blocks:'.panel' });
	
    
    scrollorama.animate('#contact h2',{
    	duration:200, property:'left', end:-860
    });
    
});

	
	$(function () {
		var 
			animation = function ( href ) {
				var 
					name = "active",
					element = $( "a[href='" + href + "']" );
				
				$( "html, body" ).stop().animate( {
					scrollLeft: $( href ).offset().left
				}, 1200 );
				
				element.closest( "ul" ).find( "li" ).removeClass( name );
				element.parent().addClass( name );
			},
			menu = $( "#list" );
			
		animation( menu.find( "li" ).eq( 0 ).find( "> a" ).attr( "href" ) );
		
		$( "#cssmenu a" ).bind( "click", function( event ) {
			var target = $( this ).attr("href");
			
			animation( target );
			
			event.preventDefault();
		} );
		
		$( "#next, #prev" ).click( function ( event ) {
			var
				positionActiveClass = menu.find( "> li.active" ).index(),
				menuLength = menu.find( "> li" ).length - 1,
				buttonId = $( this ).attr( "id" );
			
			if ( buttonId === "next" ) {
				if ( positionActiveClass === ( menuLength ) ) {
					newElementActiveClass = menu.find( "li" ).eq( 0 );
					newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
					
					animation( newPositionActiveClass );
				} else {
					newElementActiveClass = menu.find( "li" ).eq( positionActiveClass + 1 );
					newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
					
					animation( newPositionActiveClass );
				}
			} else {
				if ( positionActiveClass === 0 ) {
					newElementActiveClass = menu.find( "li" ).eq( menuLength );
					newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
					
					animation( newPositionActiveClass );
				} else {
					newElementActiveClass = menu.find( "li" ).eq( positionActiveClass - 1 );
					newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
					
					animation( newPositionActiveClass...