JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>

CSS

.content {
    margin: 1px;
    width: 200px;
    height: 400px;
    border: 1px solid black;
    float: left;
    background-color: gray;
}

.hidden{
    visibility: hidden;
}

JavaScript

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}


$(document).ready(function(){
     $('.content').each(function(){
        if(!isScrolledIntoView($(this))){
            $(this).addClass('hidden');
        }
    });

$(document).on('scroll', function(){
    $('.hidden').each(function(){
        if(isScrolledIntoView($(this))){
            $(this).removeClass('hidden').css({ 'display' : 'none' }).fadeIn();
        }
    });
});
});