JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css">
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<div id="fullpage">
    <div class="section" data-anchor="section1">1 section</div>
    <div class="section" data-anchor="section2">3 section</div>
    <div class="section active" data-anchor="section3">
        <div class="slide" data-anchor="slide1" style="background-color:#ffc20e;">1 slide</div>
        <div class="slide active" data-anchor="slide2">2 slide </div>
        <div class="slide" data-anchor="slide3" style="background-color:#7c97ce;">3 slide</div>
    </div>
    <div class="section" data-anchor="section4">4 section</div>
    <div class="section" data-anchor="section5">5 section</div>
    <div class="section" data-anchor="section6">6 section</div>
    <div class="section" data-anchor="section7">7 section</div>
</div>

CSS

.slide, .section {text-align: center}

JavaScript

var SCROLLING_SPEED = 1000;
$('#fullpage').fullpage({
        sectionsColor: ['#bce924', '#67d467', '#12bab6', '#399aff', '#ac7bfe', '#ff5a7b', '#feac2a'],
        css3: true,
        loopHorizontal: false,
        scrollingSpeed: SCROLLING_SPEED,
    
      // Hide the slides container before the next slide loads
      onSlideLeave: function(anchorLink, index, slideIndex, direction) {
          $.fn.fullpage.setScrollingSpeed(0);
          $('.fp-section').find('.fp-slidesContainer').hide();
      },

      // Display the slides container by fading it in after the next slide has been loaded.
      afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
          $('.fp-section').find('.fp-slidesContainer').fadeIn(700);
          $.fn.fullpage.setScrollingSpeed(SCROLLING_SPEED);
      },
    });