JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>

<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>

<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>

<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>

<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal...

CSS

.reveal {
    
    background: #000;
    color: #fff;
    width: 100px;
    padding: 50px;
    float: left;
    height: 95px;
    margin: 10px;
}

.noshow  { display: none; }

JavaScript

$(function() {
   
    /**
		* Reveal Sections as the users scrolls - Development Ongoing
		* Get the nth div of class content, where n is the contentNumber, and make it shown
		* Set intital divs to be hidden
	*/

    $(".reveal").addClass("oshow");
    var contentNumber = 0;
    
    function reveal() {
        var constraintNumber = contentNumber + 7;
        //IMPORTANT - DO NOT DELETE
        $(window).trigger('resize');
        //IMPORTANT - DO NOT DELETE
        for (i = contentNumber; i < constraintNumber; i++) {
            //Get the nth div of class content, where n is the contentNumber, and make it shown
            $('.reveal').eq(contentNumber).removeClass("noshow");
            contentNumber ++;
        }
    }
    
    //Window scroll function
    $(window).scroll(function() {
       if ($(window).scrollTop() == $(document).height() - $(window).height() )
        {
            reveal();
        }
    });
    reveal();
});

//Lazy
$(function() {
    $("section.reveal").lazyload();
    effect : "fadeIn"
});