JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<header class="section black">
<a href="#mission">MISSION DE L'ÉCOLE</a>
<div class="logo"></div>
</header>


<section class="section gray" id="mission"></section>
</body>

CSS

* {
	margin: 0;
}

body {
	  width: 2000px;
    position: absolute;
    top:0px;
    left:0px;
    bottom:0px;
}

.section {
    margin: 0px;
    bottom: 0px;
    width: 100vw;
    float: left;
    height: 100vh;
}

.black {
	background-color: #000000;
}

.gray {
	background-color: #838B8B;
}

JavaScript

$(document).ready(function(){

	$('a').each(function(){ // loop each <a>
		var href = $(this).attr('href');
		if (href[0] != "#") return;
		$(this).on('click', function(){
			$('body, html').animate({scrollLeft: $(href).offset().left});
		});
	});

});