JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="nav">
      <li><a href="#first">First</a></li>
      <li><a href="#second">Second</a></li>
      <li><a href="#thirst">Thirst</a></li>
      <li><a href="#four">Four</a></li>
</nav>

    <h1 id='first'>Заголовок First</h1>
    <p>...</p>

    <h1 id='second'>Заголовок Second</h1>
    <p>...</p>

    <h1 id='thirst'>Заголовок Thirst</h1>
    <p>...</p>

    <h1 id='four'>Заголовок Four</h1>
    <p>...</p>

CSS

body {
    margin-top: 300px;
}
.nav {
    position: fixed;  
    right: 40px;
    top: 10px;
  
}
.nav > li {
    list-style: none;
    padding-bottom: 10px;
}
.nav > li a {
    color: blue;
}
.nav > li a:hover {
    color: green;
}
.active {
    color: orange;
}
p {
    margin-top: 250px;
}

JavaScript

$(document).ready(function(){
    $(".nav").on("click","a", function (event) {
        // исключаем стандартную реакцию браузера
        event.preventDefault();
 
        // получем идентификатор блока из атрибута href
        var id  = $(this).attr('href'),
 
        // находим высоту, на которой расположен блок
            top = $(id).offset().top;
         
        // анимируем переход к блоку, время: 800 мс
        $('body,html').animate({scrollTop: top}, 800);
    });
});