JSFiddle - React, Tailwind, and code Playground

HTML

<a id="link1" href="#about">about</a>

<div id="about"><h1>About Me</h1></div>

CSS

#link1{
    margin-bottom:1000px;
    background-color:green;
    display:block;
}

#about{
    background-color:pink;
    display:block;
}

JavaScript

$("#link1").click(function(e) {
    e.preventDefault();
    var section = this.href, 
        sectionClean = section.substring(section.indexOf("#"));
            
    $("html, body").animate({
        scrollTop: $(sectionClean).offset().top
    }, 1000, function() {
        window.location.hash = sectionClean;
    });
});