JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test red"></div>
<div class="test red"></div>
<div class="test red"></div>
<div class="test red"></div>
<div class="test red"></div>

CSS

.test {
    position: relative;
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
}
.red {
    background-color: red;
}
.blue {
    background-color: blue;
}

JavaScript

$(document).ready(function () {
    $(".test").click(function () {
        if($(this).hasClass('red')) {
            var next;
            next = $(this).nextAll(".test");
            $('html, body').animate({
                scrollTop: next.offset().top
            }, "slow");
        } else if($(this).hasClass('blue')) {
            $(this).hide();
        }
        return false;
    });
    $('.test:last-child').removeClass('red').addClass('blue');
});