JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
    <li><a href="#section4">Section 4</a></li>
    <li><a href="#section5">Section 5</a></li>
  </ul>
</div>
<div id="sections">
  <div id="section1" class="section">
    I'm section 1
  </div>
  <div id="section2" class="section">
    I'm section 2
  </div>
  <div id="section3" class="section">
    I'm section 3
  </div>
  <div id="section4" class="section">
    I'm section 4
  </div>
  <div id="section5" class="section">
    I'm section 5
  </div>
</div>

CSS

#sections {
  position: absolute;
  top: 0;
  left: 120px;
}

#navigation {
  position: fixed;
  top: 0;
  left: 0;
}

.active {
  background: red;
}

.section {
  padding-bottom: 400px;
}

JavaScript

$(window).scroll(function() {

    var position = $(this).scrollTop();

    $('.section').each(function() {
      var target = $(this).offset().top;
      var id = $(this).attr('id');

      if (position >= target) {
        $('#navigation > ul > li > a').removeClass('active');
        $('#navigation > ul > li > a[href=#' + id + ']').addClass('active');
      }
    });
  });

  $('a').click(function(e) {
   e.preventDefault();
    $('body, html').animate({
      scrollTop: $($(this).attr("href")).offset().top
    });
  });