JSFiddle - React, Tailwind, and code Playground

HTML

<section id="s1">Section 1</section>
<section id="s2">Section 2</section>
<section id="s3">Section 3</section>
<section id="s4">Section 4</section>
<section id="s5">Section 5</section>
<section id="s6">Section 6</section>
<section id="s7">Section 7</section>

CSS

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
html, body, section {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
section {
    border: 3px solid black;
}

JavaScript

function isInViewport() {
    $("section").each(function () {
        var $this = $(this),
            wHeight = $(window).height(),
            rect = $this.getBoundingClientRect(); // Error in console
        
        // Borrowed from http://stackoverflow.com/a/7557433/5628
        if (rect.top >= 0 && rect.bottom <= wHeight) {
            console.log($this.attr("id") + "in viewport");
        }
    });
}

$(window).scroll(function () {
    // Other functions are called inside the setTimeout function, can't remove
    clearTimeout($.data(this, "scrollTimer"));
    $.data(this, "scrollTimer", setTimeout(function () {
        isInViewport();
    }, 1200));
});