JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu-main-menu" class="nav navbar-nav">
  <li class="menu-item"><a title="Home" href="#main">Home</a></li>
  <li class="menu-item"><a title="Features" href="#features">Features</a></li>
  <li class="menu-item"><a title="About" href="#about">About</a></li>
  <li class="menu-item"><a title="Contact us" href="#fill">Contact us</a></li>
</ul>

<div id="main" class="item">main</div>

<div id="features" class="item">features</div>

<div id="about" class="item">about</div>

<div id="fill" class="item">fill</div>

CSS

#menu-main-menu{
    position: fixed;
}

.item{
    width: 100px;
    height: 400px;
    background: #abc123;
    margin-bottom: 100px;
    margin-left: 200px;
    text-align: center;
    color: white;
}

li a.active{
    color: #abc123;
    font-weight: bold;
}

JavaScript

var navItems = jQuery('.menu-item a');
var win = jQuery(window);
var items = jQuery('.item');


navItems.click(function(e){
    var item = jQuery(this);
    
    jQuery('.menu-item a.active').removeClass('active');
    item.addClass('active');
});



win.scroll(function(e){
    jQuery.each(items, function(key, value){
        var item = jQuery(value);
        console.log(win.scrollTop(), item.offset().top);
        if(win.scrollTop() >= item.offset().top){
            jQuery('.menu-item a.active').removeClass('active');
            var id = item.attr('id');

            jQuery.each(navItems, function(key, value){
                var navItem = jQuery(value);
                if(navItem.attr('href') == '#'+id) navItem.addClass('active');
            });
        }
    });
});