JSFiddle - React, Tailwind, and code Playground

HTML

<div class="step1">Step 1 <a href="#step2">Step 2</a><br></div>
<div id="step2" class="step2">Step 2<a href="#step3">Step 3</a></div>
<div id="step3" class="step3">Step 3<a href="#step4">Step 4</a></div>
<div id="step4" class="step4">Step 4</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.step1 {
    display: block;
    width: 100%;
    height: 100%;
    background: pink;
}

.step2 {
    display: block;
    width: 100%;
    height: 100%;
    background: gray;
}

.step3 {
    display: block;
    width: 100%;
    height: 100%;
    background: orange;
}

.step4 {
    display: block;
    width: 100%;
    height: 100%;
    background: purple;
}

JavaScript

$(function(){
	$('a').click(function(){
        var destination = $(this).attr('href');
   		$('html,body').animate({scrollTop:$(destination).position().top}, 'slow');
    });
});