JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/dist/fullpage.js"></script>
<link rel="stylesheet" href="https://rawgit.com/alvarotrigo/fullPage.js/master/dist/fullpage.css">
<button id="moveDown">Move down</button>
<button id="moveUp">Move up</button>

<div id="fullpage">

    <div class="section active" id="section0">
        <h1>Section 0</h1>
    </div>
    <div class="section" id="section1">
        <h1>Section 1</h1>

    </div>
    <div class="section" id="section2">
        <h1>Section 2</h1>

    </div>
    <div class="section" id="section3">
        <h1>Section 3</h1>

    </div>
</div>

CSS

button {
    position: fixed;
    top: 20px;
    z-index: 99;
}

#moveUp {
    left: 30px;
}

#moveDown {
    left: 100px;
}

body {
    color: #fff;
}

h1 {
    font-size: 3em;
    margin: 0;
}

.section {
    text-align: center;
}

#section0 {
    background: -webkit-gradient(linear, top left, bottom left, from(#4bbfc3), to(#7baabe));
    background: -webkit-linear-gradient(#4BBFC3, #7BAABE);
    background: linear-gradient(#4BBFC3, #7BAABE);
}

#section1 {
    background: -webkit-gradient(linear, top left, bottom left, from(#7baabe), to(#969ac6));
    background: -webkit-linear-gradient(#7BAABE, #969AC6);
    background: linear-gradient(#7BAABE, #969AC6);
}

#section2 {
    background: -webkit-gradient(linear, top left, bottom left, from(#969ac6), to(#92a1ca));
    background: -webkit-linear-gradient(#969AC6, #92A1CA);
    background: linear-gradient(#969AC6, #92A1CA);
}

#section3 {
    background: -webkit-gradient(linear, top left, bottom left, from(#92a1ca), to(#76c2bd));
    background: -webkit-linear-gradient(#92A1CA, #76C2BD);
    background: linear-gradient(#92A1CA, #76C2BD);
}

JavaScript

$(document).ready(function() {
    $('#fullpage').fullpage();
});


$('#moveDown').click(function() {
    $.fn.fullpage.moveSectionDown();
});


$('#moveUp').click(function() {
    $.fn.fullpage.moveSectionUp();
});