JSFiddle - React, Tailwind, and code Playground

HTML

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="content">TEXT SHOULD APPEAR NOW</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="footer">FOOOOOOTER</div>

CSS

.content{
    position:absolute;
    top:200px;
    
    background:red;
}

JavaScript

$('.content').hide();
var target = $("#footer").offset().top-$(window).height();

$(document).scroll(function() {
    if ($(window).scrollTop() >= target) {
        $('.content').show('slow');
    }
});