JSFiddle - React, Tailwind, and code Playground

HTML

<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>

CSS

div{
  width: 100%;
}
.red {
  background: red;
}
.yellow {
  background: yellow;
}
.green {
  background: green;
}

JavaScript

var winHeight = window.innerHeight;
$('div').each(function(){
		$(this).css('height', winHeight);
});

function scrollSections() {

        var windowHeight = window.innerHeight;
        var scrollTop = $(window).scrollTop();
        var pos = windowHeight;

        if (scrollTop > windowHeight) {
            pos = windowHeight * 2;
        }

        $('body, html').animate({scrollTop: pos}, 1000, function() {
        });
}

$( window ).on( "scroll", function() {

        scrollSections();

    });