JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col100">1</div>
<div class="col100 n">2</div>
<div class="col100">3</div>
<div class="col100">4</div>

CSS

body, html {
    width: 100%: height: 100%;
    margin:0;
    padding: 0;
    background-color: grey;
}
.col100 {
    margin: 0;
    padding: 0;
    position: absolute;
    height: 100%;
    width: 100%;
}
.col100:nth-of-type(odd) {
    background-color: salmon;
}
.col100:nth-of-type(2) {
    top: 100%;
}
.col100:nth-of-type(3) {
    top: 200%;
}
.col100:nth-of-type(4) {
    top: 300%;
}

JavaScript

$('.col100').click(function(e){
    e.preventDefault();
    var H = $(this).next('.col100').offset().top;
    $('html, body').animate({scrollTop: H}, 200);
    

});