JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="landingpage">
        <p>Landing Page<p>
    </div>
    <div id="galone" class="vert"></div>
    <div id="galtwo" class="vert"></div>
    <div id="galthree" class="vert"></div>
    <div id="galfour" class="vert"></div>
    <div id="galfive" class="vert"></div>
    <div id="galsix" class="vert"></div>
</div>

CSS

#container {
    height: 400px;
    width: 3000px;
}
#landingpage {
    height: 200px;
    width: 400px;
    background-color:blue;
    position: relative;
    float: left;
}
#galone {
    height: 200px;
    width: 100px;
    background-color: green;
    position: relative;
    float: left;
}
#galtwo {
    height: 200px;
    width: 100px;
    background-color: brown;
    position: relative;
    float: left;
}
#galthree {
    height: 200px;
    width: 100px;
    background-color: pink;
    position: relative;
    float: left;
}
#galfour {
    height: 200px;
    width: 100px;
    background-color: orange;
    position: relative;
    float: left;
}
#galfive {
    height: 200px;
    width: 100px;
    background-color: purple;
    position: relative;
    float: left;
}
#galsix {
    height: 200px;
    width: 100px;
    background-color:lightgreen;
    position: relative;
    float: left;
}
p {
    margin-top: 90px;
    margin-left: 150px;
}

JavaScript

window.onscroll = function () {
    var scroll = window.scrollY;
    $('#second').css('left', '-' + scroll + 'px');
};