JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/stellar.js/0.6.2/jquery.stellar.min.js"></script>
<body>
    <div id="one" data-stellar-ratio=".2">
        <p>This is the first div.</p>
    </div>
    <div id="two" data-stellar-ratio="1">
        <p>This is the second one.</p>
    </div>
    <div id="three">
        <p>Third one!</p>
    </div>
    <div id="four">
        <p>Fourth and last.</p>
    </div>
</body>

CSS

* {
    margin: 0;
    padding: 0;
}
#one, #two, #three, #four {
    position: absolute;
    height: 100%;
    width: 100%;
    font-size: 5em;
}
p {
    margin: 1em;
    width: 60%;
}
#one {
    background: red;
}
#two {
    background: blue;
    top: 100%;
}
#three {
    background: green;
    top: 200%;
}
#four {
    background: yellow;
    top: 300%;
}

JavaScript

$(function () {
    $.stellar({
        horizontalScrolling: false,
    });
});