JSFiddle - React, Tailwind, and code Playground

by metaxos

HTML

<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">
        <div class="slide">
            <div class="demo">Demo</div>Two</div>
        <div class="slide">Three</div>
    </div>
    <div class="section">Third</div>
    <div class="section">Four</div>
</div>

CSS

.section {
    text-align:center;
}

JavaScript

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],

    scrollBar: true,
    verticalCentered: false,
    resize: false,
    scrollingSpeed: 1600,
    easing: 'easeOutBack',
    menu: false,
    navigation: true,
    autoScrolling: true,
    sectionSelector: '.section',
    continuousVertical: false,
    slidesNavigation: false,
    slideSelector: '.slide',
    scrollOverflow: true,
    paddingTop: '0px',
    anchors: ['aaa', 'bbb', 'ccc', 'ddd'],
    navigationPosition: 'right',
    navigationTooltips: ['aaa', 'bbb.', 'ccc', 'ddd']
});