JSFiddle - React, Tailwind, and code Playground

by Per Åstrand

HTML

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


<section class="section gray" id="mission">
  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

$("#mission-link").on("click", function(){
  $('body').animate({scrollLeft: $("#mission").offset().left}, 800)
})