JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="box"></div><div class="box"></div>
</div>

CSS

#container { width: 440px; }
.box { display: inline-block; width: 190px; height: 190px; margin: 5px; background: blue; }
.red { background: red; }

JavaScript

$(document).ready(function(){
    $(window).scroll(function(){
        var docBottom = $(document).height();
        var winBottom = $(window).height() + $(window).scrollTop();
        var scrollTrigger = $(window).height() * 0.25;

        if ((docBottom - scrollTrigger) < winBottom) {
            $("#container").append("<div class='box red'></div>");
            console.log("added more");
        }
    });
});