JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#elt1" class="scroll">Element1</a></li>
    <li><a href="#elt2" class="scroll">Element2</a></li>
    <li><a href="#elt3" class="scroll">Element3</a></li>
</ul>

<div id="elt1">
    Test1
</div>

<div id="elt2">
    Test2
</div>

<div id="elt3">
    Test3
</div>

CSS

div {
 height: 400px;   
}

.red {
 border: 1px solid red;   
}

JavaScript

$(".scroll").click(function(event) {
    var $target = $(this.hash);

    event.preventDefault();
    $('html,body').animate({
        scrollTop: $target.offset().top
    }, 1000);
    $target.css("border", "1px solid #ff0000");
    setTimeout(function() {$target.css("border", "none");}, 500);
});