JSFiddle - React, Tailwind, and code Playground

HTML

-<!--the menu-->
	<div id="cssmenu">
    <ul id="list">
        <li><a href="#home" ><br />LA R&Eacute;NOVATION,<br /> <strong>UNE HISTOIRE</strong><br /><br /></a></li>
        <li><a href="#home2">home2</a></li>
        <li><a href="#newsletter"><br />UN NOUVEL<br /> <strong>ESPRIT</strong><br /><br /></a></li>
        <li><a href="#directions"><br />L'ARCHITECTURE<br /><strong> ROYALE</strong><br /><br /></a></li>
		<li><a href="#dir"><br />LES &Eacute;TAPES<br /> <strong>DU CHANTIER</strong><br /><br /></a></li>
		<li><a href="#contact"><br />LA R&Eacute;NOVATION<br /><strong> EN CHIFFRES</strong><br /><br /></a></li>
        <li><a href="#acteur1"><br />LES ACTEURS<br /><strong> DU CENTRE</strong><br /><br /></a></li>
        <li><a style="display:none" href="#acteur2"></a></li>
        <li><a style="display:none" href="#acteur3"></a></li>
        <li><a href="#market1"><br />NOUVELLES<br /><strong> BOUTIQUES</strong><br /><br /></a></li>
        <li><a style="display:none" href="#market2"></a></li>
        <li><a style="display:none" href="#market3"></a></li>
        <li><a href="#calendar"><br />LE CALENDRIER<br /><strong> DE L'ANN&Eacute;E</strong><br /><br /></a></li>
    </ul>
	</div>
		<!--end of the menu-->
		
		<!--arrows nav-->
		<a href="#1" title="Page precédente" class="flscroll" id="flscrollg"></a>
		<a href="#1" title="Page suivante" class="flscroll" id="flscrolld"></a>
		<!--end arrows-->

		<div id="wrap">
		

		
			<div id="home" class="panel">
			<div class="img1pos">
            <img  src="http://lorempixum.com/200/200/people/3"/>
            </div>
            
            <div id="texteintroEcran1">
            <img src="http://lorempixum.com/200/200/people/3"/>
            </div>
            
			</div><!--fin du home-->
            
            <div id="home2" class="panel">
            <div class="img1posfixed">
            <img src="http://lorempixum.com/200/200/people/3"/>
            </div>
            <div id="home2imgpos">
       ...

CSS

#cssmenu ul {
    margin: 0;
    padding: 0.5px; /*0*/
    font-size: 13pt;/*12pt*//*12px;*/
    /*font-weight: bold;*/
    background: #94adc1; /*#f2f1f2;*/
    /*font-family: Arial, Helvetica, sans-serif;*/
	font-family: 'ITCAvantGardeStd-Bk'; /*ajout*/
    border-bottom: 1px solid #f2f1f2;
    zoom: 1;
	text-align:center; /*ajout*/
	height:94px; /*ajout*/
}

#cssmenu ul:before {
    content: '';
    display: block;
}

#cssmenu ul:after {
    content: '';
    display: table;
    clear: both;
}

#cssmenu li {
    float: left;
    margin: 0 auto;
    padding: 0 4px;
    list-style: none;
	/*border-right:1px solid black;*/
}

#cssmenu li a {
    display: block;
    float: left;
    color: #123b59; /*#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:before {
    /*display: inline;
    border-bottom: 3px solid #00b8fd;
    float: left;
    margin: 0;*/
	
	/*ajout pour la flèche*/
	content: ' ';
    width: 0px; 
	height: 10px; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 10px solid white;
    display: inline-block;
    position:absolute;
    bottom:10px;
	
    /*ou bien*/
    /* position: relative;
    left: -40px;
    top: 20px;*/
    /*fin*/
}

#cssmenu {
    width: 100%;
    position: fixed;
	height:94px; /*ajout*/
}
body {
    margin: 0;
	overflow:hidden;
}

/*body, #wrap, .panel {
	height: 100%;
	overflow: hidden;
	position: relative;
	
}*/
.panel, #wrap {
    height:100%;
    overflow: hidden;
    position: relative;
    margin-top:64px; /*32px*//*ajout*/
	
	}



/* panels setup */



.panel {
	width: 100%;
	display: table;
	/*background: #eee;*/
	height: 768px;
	background: background: #eee;
}




/*define the wrapper*/
#wrap {
    width: 1300%; /* 100 multiplied by the number of sections ( 5 ) */
	margin: 0 auto;
  ...

JavaScript

$(document).ready(function() {
    
    $(".panel").fadeIn(1000);
 
    $("a").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $(".panel").fadeOut(500); 
        $(".panel").fadeIn(1000);
    });
         
    
});
$(function () {
//$("body").addClass("has-js");
		
		var 
			animation = function ( href ) {
				var 
					name = "active",
					element = $( "a[href='" + href + "']" ),
                    $target = $( href );
				
	/*			$( "html, body" ).stop().animate( {
					scrollLeft: $target.offset().left
				}, 3000 );
				
				element.closest( "ul" ).find( "li" ).removeClass( name );
				element.parent().addClass( name );
                
                $('#wrap').find('.shown').removeClass('shown');
                $target.addClass('shown');
				
				//added for woman x translation
				$('#wrap').find('.shownimg1').removeClass('shownimg1');
                $target.addClass('shownimg1');
				//end of add
				
				//opacity management on text for the first slide 0 to 100
				//$('#wrap').find('.showtxtintro').removeClass('showtxtintro');
                //$target.addClass('showtxtintro');
				//on utilise l'image png pour le texte du premier slide car prb de fonts et non plus .showtxtinto ref #txtslide1
				$('#wrap').find('.showntxtintroScreen1').removeClass('showntxtintroScreen1');
                $target.addClass('showntxtintroScreen1');
				
				//end text opacity slide 1
				
				//text translate on second slide
				$('#wrap').find('.showtxt').removeClass('showtxt');
                $target.addClass('showtxt');
				
				//effef sur le texte slide 2
				$('#wrap').find('.showimghome2').removeClass('showimghome2');
                $target.addClass('showimghome2');
				//fin
				
				//effet sur le slide newspirit
				$('#wrap').find('.showtxtnewspiritTitle').removeClass('showtxtnewspiritTitle');
               ...