JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cssmenu">
	<div id="contenuAlerte">
  
  </div>
    <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>

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() {
		       $("#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();
        
        
        $("#contenuAlerte").html("alerte 1");
        /*
$("html, body").stop().animate({
		               scrollLeft: $($anchor).offset().left
					   
		           }, 1000);
		       });*/
  
    
 });

$(function() {
    $('#prev').bind('click',function(event){
         event.preventDefault();
       
        $("#contenuAlerte").html("alerte 2");
        /*
$("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();
});