JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
<div class="container" id="skrollr-body"
    data-0="left:0px;"
    data-250="left:-500px;"
    data-500="left:-1000px;"
    data-750="left:-1500px;"
    data-1000="left:-2000px;"
    >
        <div
        data-smooth-scrolling="off"
        data-0="top:0px;"
        data-250="top:250px;"
        data-500="top:500px;"
        data-750="top:750px;"
        data-1000="top:1000px;"
        >
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="box3"></div>
        </div>
</div>

CSS

body{
            width: 1000px;
            height: 100%;
            float: left;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            background: silver;
        }
        .container,  .container > div{
            width: 5000px;
            height: 200px;
            float: left;
            top:0px;
            left:0px;
            position:absolute;
        }
        .container .box1{
            width: 300px;
            height: 100px;
            float: left;
            background: red;
            position:absolute;
            top:0px;
            left:0px;
        }
        .container .box2{
            width: 300px;
            height: 100px;
            float: left;
            top:0px;
            left:300px;
            background: yellow;
            position:absolute;
        }
        .container .box3{
            width: 300px;
            height: 100px;
            float: left;
            top:0px;
            left:600px;
            background: blue;
            position:absolute;
        }

JavaScript

skrollr.init({
    forceHeight: true,
    smoothScrolling:true
});