JSFiddle - React, Tailwind, and code Playground

HTML

<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>

CSS

.elem {
    padding: 1em;
    font-family: Helvetica;
    font-size: 18px;
    background: black;
    color: white;
    width: 100%;
}
.elem.last {
    background: red;
    color: white;
}

JavaScript

$(document).ready(function() {
    // Store the offsets in an array
    var offsets = [];
    // Cache the elements to select
    var elements = $('.elem');
    // Cache the window jQuery Object
    var jWindow = $(window);
    // Cache the calculation of the window height
    var jWindowHeight = jWindow.height();
    // set up the variable for the current selected offset
    var currentOffset;
    // set up the variable for the current scrollOffset
    var scrollOffset;
    // set up the variable for scrolled, set it to true to be able to assign at
    // the beginning
    var scrolled = true;

    // function to assign the different elements offsets,
    // they don't change on scroll
    var assignOffsets = function() {
        elements.each(function() {
            offsets.push({
                offsetTop: $(this).offset().top,
                height: $(this).height(),
                element: $(this)
            });
        });
    };

    // execute the function once. Exectue it again if you added
    // or removed elements
    assignOffsets();

    // function to assign a class to the last element
    var assignLast = function() {
        // only execute it if the user scrolled
        if (scrolled) {
            // assigning false to scrolled to prevent execution until the user
            // scrolled again
            scrolled = false;
            
            // assign the scrolloffset
            scrollOffset = jWindowHeight + jWindow.scrollTop();

            // only execute the function if no current offset is set,
            // or the user scrolled down or up enough for another element to be
            // the last
            if (!currentOffset || currentOffset.offsetTop < scrollOffset || currentOffset.offsetTop + currentOffset.height > scrollOffset) {

                // Iterate starting from the bottom
                // change this to positive iteration if the elements count below 
                // the fold is higher than above the fold
     ...