JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#test1">Test1</a>
<a href="#test2">Test2</a>
<a href="#test3">Test3</a>

<div class="test1" id="test1">Test1</div>
<div class="test2" id="test2">Test2</div>
<div class="test3" id="test3">Test3</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

CSS

.test1 {
    margin-top:10px;
    height:200px;
    width:200px;
    background:#ccc;
}

.test2 {
    margin-top:10px;
    height:200px;
    width:200px;
    background:#ccc;
}

.test3 {
    margin-top:10px;
    height:200px;
    width:200px;
    background:#ccc;
}

JavaScript

$(document).ready(function(){
    $('a[href^="#"]').bind('click.smoothscroll',function (e) {
        e.preventDefault();
      
        var target = this.hash,
        $target = $(target);
      
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 500, 'swing', function () {
            window.location.hash = target;
        });
    });
});