JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">Scroll down!</div>
<div id="revealed-section-placeholder"></div>
<div id="revealed-section">
    <h1> Content here </h1> <br/><br/>
    <h1> Content here </h1> <br/><br/>
    <h1> Content here </h1> <br/><br/>
    <h1> Content here </h1> <br/><br/>
</div>

CSS

body{margin:0;}
#main {height: 700px; position:relative; z-index: 2; background: blue;} 
#revealed-section {height: 400px; position:fixed; bottom:0; width:100%; background: green;} 
#revealed-section-placeholder {height: 400px;}