JSFiddle - React, Tailwind, and code Playground

HTML

<div class="first" id="first" style="height:50%;">
    <p>First content</p>
    <p>First content</p>
    <p>First content</p>
    <p>First content</p>
    <p>First content</p>
    <p>First content</p>
    <p>First content</p>
    <p>First content</p>
    <p>First content</p>
    <p>First content</p>
    <p>First content</p>
    <p>First content</p>
    <p>First content</p>
    <p>First content</p>
    <p>First content</p>
    <p>First content</p>
    <p>First content</p>
    <p>First content</p>
    <p>First content</p>
    <p>First content</p>
</div>
<div class="second" id="second" style="height:50%; display:none;">
    <p>Second content</p>
    <p>Second content</p>
    <p>Second content</p>
    <p>Second content</p>
    <p>Second content</p>
    <p>Second content</p>
    <p>Second content</p>
</div>

CSS

#first {
    height: 50%;
    background-color: #F00;
}
#second {
    height: 50%;
    background-color: #0F0;
    display:none;
}

JavaScript

$(function () {
    $("#first").on('click', function () {
        $('#second').show();
        $('html, body').animate({
            scrollTop: $("#second").offset().top
        }, 2500); // Change 2500 value to time it takes to scroll
    });
});