JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.js"></script>
<link rel="stylesheet" href="https://rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.css">
<div id="pagePiling">
    <div class="section">One</div>
    <div class="section">Two</div>
    <div class="section">Three</div>
    <div class="section pp-scrollable">
        <div class="box">Long text</div>
        <div class="box">Long text</div>
        <div class="box">Long text</div>
        <div class="box">Long text</div>
        <div class="box">Long text</div>
        <div class="box">Long text</div>
        <div class="box">Long text</div>
        <div class="box">Long text</div>
        <div class="box">Long text</div>
        <div class="box">Long text</div>
        <div class="box">Long text</div>
        
    </div>
    <div class="section">Five</div>
</div>

CSS

.section {
    text-align:center;
}

.box{
    display:block;
    padding:20px;
    margin:20px;
    background: #ccc;
}

JavaScript

$('#pagePiling').pagepiling({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    verticalCentered:false
});