JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/vendors/scrolloverflow.js"></script>
<script src="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css">
<div id="fullpage">
    <div class="section">One</div>
    <div class="section fp-auto-height">
        <div class="pane">Two 1</div>
        <div class="pane">Two 2</div>
        <div class="pane">Two 3</div>
        <div class="pane">Two 4</div>
        <div class="pane">Two 5</div>
    </div>
    <div class="section">Three</div>
    <div class="section">Four</div>
</div>

CSS

.section {
    text-align:center;
}

.pane {
  min-height:300px;
  margin:20px 0;
  background:#fff
}

JavaScript

var IScroll;

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    navigationTooltips: ['one', 'two', 'three', 'four'],
    navigation: true,
    navigationPosition: 'right',
    fitToSection: false,
    scrollOverflow:true,
    afterLoad: function(anchorLink, index){
      var loadedSection = $(this);
      var nextSection = loadedSection.next();
      var prevSection = loadedSection.prev();
      if(nextSection.hasClass('fp-auto-height') ) {
        var IScroll = nextSection.find('.fp-scrollable').data('iscrollInstance');
        IScroll.scrollTo(0, 0, 0)
      }
      if(prevSection.hasClass('fp-auto-height') ) {
        var IScroll = prevSection.find('.fp-scrollable').data('iscrollInstance');
        IScroll.scrollTo(0, IScroll.maxScrollY, 0)
      }
    }

});