JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
<input type="button" id="btnScroll" value ="Scroll To Block 2"/>
</div>
<div id="block1"></div>
<div id="block2"></div>
<input type="button" id="btnTop" value ="Scroll Back to Top"/>

CSS

input[type="button"]{
    margin:5px 175px;;
}

#block1 {
    background-color: #29234C;
    height:600px;
    width: 100%;
    margin:0 0 20px 0;
}

#block2 {
    background-color: #3953AC;
    height:600px;
    width: 100%;
}

JavaScript

$("#btnScroll").click(function() {
    $("html, body").animate({ scrollTop: $("#block2").offset().top }, 500);    
});

$("#btnTop").click(function() {
    $("html, body").animate({ scrollTop: $("#main").offset().top }, 500);    
});