JSFiddle - React, Tailwind, and code Playground

HTML

<body class="home">
    <div class="main"> 
        <div class="section">
            <h2 data-stellar-offset-parent="true"></h2>
        </div>
        <div class="section">
            <h2 data-stellar-offset-parent="true"></h2>
        </div>
        <div class="section">
            <h2 data-stellar-offset-parent="true"></h2>
        </div>
        <div class="section">
            <h2 data-stellar-offset-parent="true"></h2>
        </div>
        <div class="section">
            <h2 data-stellar-offset-parent="true"></h2>
        </div>
    </div><!-- main -->
</body>

CSS

.main {
    overflow: hidden;
    position: relative;
    z-index: 10;
}
.home .main {
    width: auto;
    background: #ccc;
}
.section {
    display: block;
    margin: 40px 0;
    position: relative;
    vertical-align: top;
    width: 500px;
    z-index: 10;
    background:#000;
    height: 300px;
}

JavaScript

/* Stellar.js v0.1
 * Copyright 2012, Mark Dalgleish
 *
 * This content is released under the MIT License
 * markdalgleish.mit-license.org
 */
;(function($, window, document, undefined){
    
    var pluginName = 'stellar',
        defaults = {
            scrollProperty: 'scroll',
            positionProperty: 'position',
            horizontalScrolling: true,
            verticalScrolling: true,
            horizontalOffset: 0,
            verticalOffset: 0,
            parallaxBackgrounds: false,
            parallaxElements: false,
            hideDistantElements: true,
            viewportDetectionInterval: 10000,
            hideElement: function($elem) { $elem.hide(); },
            showElement: function($elem) { $elem.show(); }
        },
        
        scrollProperty = {
            scroll: {
                getTop: function($elem) { return $elem.scrollTop();    },
                setTop: function($elem, val) { $elem.scrollTop(val); },
                
                getLeft: function($elem) { return $elem.scrollLeft(); },
                setLeft: function($elem, val) { $elem.scrollLeft(val); }
            },
            position: {
                getTop: function($elem) { return parseInt($elem.css('top'), 10) * -1; },
                setTop: function($elem, val) { $elem.css('top', val); },
                
                getLeft: function($elem) { return parseInt($elem.css('left'), 10) * -1; },
                setLeft: function($elem, val) { $elem.css('left', val); }
            },
            margin: {
                getTop: function($elem) { return parseInt($elem.css('margin-top'), 10) * -1; },
                setTop: function($elem, val) { $elem.css('margin-top', val); },
                
                getLeft: function($elem) { return parseInt($elem.css('margin-left'), 10) * -1; },
                setLeft: function($elem, val) { $elem.css('margin-left', val); }
            },
            transform: {
                getTop: function($elem) {...