JSFiddle - React, Tailwind, and code Playground

HTML

<div class="onePage a">
  <button class="next">next</button>
  <h1>page 1</h1>
</div>
<div class="onePage b">
  <button class="next">next</button>
  <button class="prev">prev</button>
  <h1>page 2</h1>
</div>  
<div class="onePage a">
  <button class="prev">prev</button>
  <h1>page 3</h1>
</div>

CSS

body, html {
  padding:0; margin:0;
}
.onePage {
  padding: 2em;
}
.a {
    background:red;
}
.b {
    background:yellow;
}

JavaScript

// easing plug in
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
	def: 'easeInCubic',
	swing: function (x, t, b, c, d) {
		//alert(jQuery.easing.default);
		return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
	},
	easeInCubic: function (x, t, b, c, d) {
		return c*(t/=d)*t*t + b;
	}
});

// utility
function onePage(el) {
	var windowWidth = $(window).width(),
		windowHeight = $(window).height(),
		next = el.next('.onePage'),
		prev = el.prev('.onePage');
	el.width(windowWidth);
	el.css({"min-height":windowHeight});
	
	el.find('.next').on('click', function() {
		goTo(el, next);
	});
	el.find('.prev').on('click', function() {
		goTo(el, prev);
	});
}
function goTo(start, end) {
	var ini = start.offset().top,
		destination = end.offset().top, 
		distance = Math.abs(ini - destination),
		speed = distance/2; 	
		$('html body').animate({
			scrollTop : destination
		}, speed);
}
function getOnePageLocation(el) {
	var topPos = el.offset().top,
		bottomPos = el.height(),
		downThreshold = topPos - 100,
		upThreshold = bottomPos - 100, 
		onePageThreshold = [topPos,bottomPos,downThreshold,upThreshold];	
		return onePageThreshold;
}
function checkScrollDirection(){
    var lastScrollTop = 0, delta = 0;
	var st = $(this).scrollTop();
	if(Math.abs(lastScrollTop - st) <= delta)
		return false;
	if (st > lastScrollTop){
	// downscroll code
		return "down";
	} else {
	// upscroll code
		return "up";
	}
	lastScrollTop = st;
}
function closest(array,num){
    var i=0;
    var minDiff=1000;
    var ans;
    for(i in array){
         var m=Math.abs(num-array[i]);
         if(m<minDiff){ 
                minDiff=m; 
                ans=array[i]; 
            }
      }
    return ans;
}
    $(document).ready(
        function() {
            
            var onePageLoacations = []; 
            
            $('.onePage').each(
                function(index, el) {
                    onePage($(el));
                    var onePageLoacation =...