JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <nav>
      <ul>
        <li><a href="#" id="nav-item-1" class="active">section1</a></li>
        <li><a href="#" id="nav-item-2">section2</a></li>
        <li><a href="#" id="nav-item-3">section3</a></li>
        <li><a href="#" id="nav-item-4">section4</a></li>
      </ul>
    </nav>
  </div>


  <section id="section1">Section 1</section>
  <section id="section2">Section 2</section>
  <section id="section3">Section 3</section>
  <section id="section4">Section 4</section>

CSS

* {
      padding: 0;
      margin: 0;
    }
    
    .active {
      color: red;
    }
    
    .container {
      width: 800px;
    }
    
    a {
      text-decoration: none;
      color: inherit;
    }
    
    section {
      padding: 200px 0;
      width: 100%;
      text-align: center;
      font-size: 35px;
    }
    
    #section1 {
      background: #fafafa;
    }
    
    #section2 {
      background: #e2e2e2;
    }
    
    #section3 {
      background: #c9c9c9;
    }
    
    #section4 {
      background: #d4d4d4;
    }
    
    nav {
      position: fixed;
      text-align: center;
      width: 100%;
      background: black;
      padding: 25px 0;
    }
    
    nav ul {
      list-style: none;
      text-align: center;
    }
    
    nav ul li {
      display: inline-block;
      margin-right: 40px;
      color: #fff;
    }

JavaScript

$("#nav-item-1").click(function () {
    $('html, body').animate({
      scrollTop: $("#section1").offset().top
    }, 2000);
  });
  $("#nav-item-2").click(function () {
    $('html, body').animate({
      scrollTop: $("#section2").offset().top
    }, 2000);
  });
  $("#nav-item-3").click(function () {
    $('html, body').animate({
      scrollTop: $("#section3").offset().top
    }, 2000);
  });
  $("#nav-item-4").click(function () {
    $('html, body').animate({
      scrollTop: $("#section4").offset().top
    }, 2000);
  });

  $("#nav-item-1").click(function () {
    $("a").removeClass('active');
    $("#nav-item-1").addClass('active');
  });
  $("#nav-item-2").click(function () {
    $("a").removeClass('active');
    $("#nav-item-2").addClass('active');
  });
  $("#nav-item-3").click(function () {
    $("a").removeClass('active');
    $("#nav-item-3").addClass('active');
  });
  $("#nav-item-4").click(function () {
    $("a").removeClass('active');
    $("#nav-item-4").addClass('active');
  });
  $(document).ready(function(){
  	$(window).scroll(function (event) {
    	var scroll = $(window).scrollTop();
    	if(scroll < 440){
    	 $("a").removeClass('active');
   		 $("#nav-item-1").addClass('active');
      }
      else if(scroll > 440 && scroll < 880){
    	 $("a").removeClass('active');
   		 $("#nav-item-2").addClass('active');
      }
      else if(scroll > 880 && scroll < 1320){
    	 $("a").removeClass('active');
   		 $("#nav-item-3").addClass('active');
      }
      else if(scroll >= 1320){
    	 $("a").removeClass('active');
   		 $("#nav-item-4").addClass('active');
      }
		});
  });