JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="first-div">
        <a href="#">Link1</a>
        <a id="activate-two" href="#second">Link2</a>
        <a href="#">Link3</a>
    </div>
    <div class="second-div" id="second">
        <a id="activate-three" href="#third">Link1</a>
        <a href="#">Link2</a>
        <a href="#">Link3</a>
    </div>
    <div class="third-div" id="third">
        <a href="#">Link1</a>
        <a href="#">Link2</a>
        <a id="activate-four" href="#">Link3</a>
    </div>
</div>

CSS

.wrapper {background-color:#F60;}
.first-div {background-color:#CCC;}
.first-div, .second-div, .third-div {height:1200px;}
.second-div, .third-div {display:none;}

JavaScript

$(document).ready(
    function(){
$("#activate-two").click(function(){
   $("#second").show("15000",function(){
      $('html, body').animate({ scrollTop: $("#second").offset().top }, 'slow');
   })
});
        });