JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/jquery.waypoints/2.0.4/waypoints.js"></script>
<div class="blue">
    First Panel
</div>

CSS

body, html{
    height: 200%;
}
div{
    position: relative;
    top: 50%;
}
.blue{
    background-color: blue;
}
.red{
    background-color: red;
}

JavaScript

$("div").waypoint(function(){
    $(this).addClass("blue").removeClass("red");      
},{offset:'10%'});

$("div").waypoint(function(){
    $(this).addClass("red").removeClass("blue");      
},{offset:'24%'});

$("div").waypoint(function(){
    $(this).addClass("blue").removeClass("red");       
},{offset:'74%'});

$("div").waypoint(function(){
    $(this).addClass("red").removeClass("blue");      
},{offset:'75%'});