JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <a href="#block1"> Block 1 </a>
    <a href="#block2"> Block 2 </a>
    <a href="#block3" class=""> Block3 </a>
    <a href="#block4"> Block 4 </a>
</nav>
<div>
    <section id ="block1" class="nav">block 1</section>
    <section id ="block2" class="nav">block 2</section>
    <section id ="block3" class="nav">block 3</section>
    <section id ="block4" class="nav">block 4</section>
<div>

CSS

section#block1{
  height: 700px;
    background: #F05222;
}
section#block2{
  height: 700px;
    background: #7CBA01;
}
section#block3{
  height: 700px;
    background: #00A6F0;
}
section#block4{
    background: #FFB901;
    height: 100px;
}
nav{
    position: fixed;
    right:20px;
    top: 20px;
    padding: 10px;
    border-radius: 5px;
    background: #ededed;
}
a{
    display: block;
}
.active{
    color: #f95;
}

JavaScript

jQuery(window).scroll(function(){
         var $sections = $('section');
	$sections.each(function(i,el){
        var top  = $(el).offset().top-100;
        var bottom = top +$(el).height();
        var scroll = $(window).scrollTop();
        var id = $(el).attr('id');
    	if( scroll > top && scroll < bottom){
            $('a.active').removeClass('active');
			$('a[href="#'+id+'"]').addClass('active');

        }
    })
 });

$("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);
    });