JSFiddle - React, Tailwind, and code Playground

HTML

<section id="one" class="story" data-speed="3" data-type="background" data-offsetY="0">
    <div class="inner">
        <h1>One</h1>
    </div>
</section>

<section id="two" class="story" data-speed="3" data-type="background" data-offsetY="0">
    <div class="inner">
        <h1>Two</h1>
        <div id="block"></div>
    </div>
</section>

<section id="three" class="story" data-speed="3" data-type="background" data-offsetY="0">
    <div class="inner">
        <h1>Three</h1>
    </div>
</section>

<section id="four" class="story" data-speed="3" data-type="background" data-offsetY="0">
    <div class="inner">
        <h1>Four</h1>
    </div>
</section>

CSS

body {
    background:#000;
    font-family:arial,verdana;
    color:#fff;
    font-size:12px;
}

section {
    height:450px;
    width:100%;
    position:relative;
}

.inner {
    width:900px;
    margin:0 auto;
}

#one {
    background:#1e1e1e;    
}

#two {
    background:#545454;
}

#three {
    background:#1e1e1e;    
}

#four {
    background:#545454;    
}

#block {
    top:150px;
    width:50px;
    height:50px;
    position:absolute;
    border:1px solid #ff0000;
}

JavaScript

$(document).ready(function(){
        function scroll() {
            $("#block").animate({ "left": "+=180px" }, 1000);
        }
    });