JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <li data-id="foo">Foo</li>
    <li data-id="quemSomos">Quem somos</li>
</nav>
<div id="foo">Foo foo foo</div>
<div id="quemSomos">Quem somos Quem somos Quem somos</div>

CSS

div {
    height: 500px;
    margin: 100px;
    border: solid grey 2px
}

JavaScript

$('nav li').click(function() {
    var pos = $('#' + this.dataset.id).position().top;
    $('html, body').animate({
        scrollTop: pos
    }, 1000);
});