JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css">
<div id="fullpage">
    <div class="section section-home">
      <h1>home</h1>
    </div>
     <div class="section section-content">
       <h1>1</h1>
    </div>
     <div class="section section-content">
       <h1>2</h1>
    </div>
    <div class="section section-content">
        <h1>3</h1>
    </div>
    <div class="section section-content">
        <h1>4</h1>
    </div>
     <div class="section section-footer">
        <h1>footer</h1>
    </div>
</div>

CSS

h1 {
    font-size:50px;
    margin:0;
}
.section-home {
    text-align: center;
    background: blue;
    color: #fff;
}
.section-content {
    text-align: center;
    background: green;
    color: #fff;
}
.section-footer {
    height: 100px;
    text-align: center;
    background: purple;
    color: #fff;
}

JavaScript

var delay = 1000;
  var animationIsFinished2 = false;
  var animationIsFinished3 = false;
  var animationIsFinished4 = false;
  var animationIsFinished5 = false;

$('#fullpage').fullpage({
      anchors: [
      'section-home','content-1',
      'content-2', 'content-3',
      'content-4', 'section-footer'
      ],
      onLeave: function (index, nextIndex, direction) {
        
        if (index == 1) {
          $.fn.fullpage.setScrollingSpeed(700);
        } else if(index == 2 && direction == 'up') {
          $.fn.fullpage.setScrollingSpeed(700);
        } else if(index == 2 && direction == 'down') {
          $.fn.fullpage.setScrollingSpeed(0);
        }  else if(index > 2 && index < 5) {
          $.fn.fullpage.setScrollingSpeed(0);
        } else if (index == 5 && direction == 'up') {
          $.fn.fullpage.setScrollingSpeed(0);
        } else if (index == 5 && direction == 'down') {
          $.fn.fullpage.setScrollingSpeed(700);
        }
        
        switch(index) {
          case 2:
            if(direction == 'down') {
              setTimeout(function(){
                  animationIsFinished2 = true;
                  $.fn.fullpage.silentMoveTo(nextIndex);
              }, delay);
              return animationIsFinished2;
            }
            break;
          case 3:
            setTimeout(function(){
              animationIsFinished3 = true;
              $.fn.fullpage.silentMoveTo(nextIndex);
            }, delay);
            return animationIsFinished3;
            break;
            
          case 4:
            setTimeout(function(){
              animationIsFinished4 = true;
              $.fn.fullpage.silentMoveTo(nextIndex);
            }, delay);
            return animationIsFinished4;
            break;

          case 5:
            if (direction == 'up') {
              setTimeout(function(){
                  animationIsFinished5 = true;
                  $.fn.fullpage.silentMoveTo(nextIndex);
              }, delay);
    ...