JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="menu-center">
    <ul class="click crsl">
        <li class="active"><a class="page1 dot" data-href="home">Home</a></li>
        <li><a class="page2 dot" data-href="blog">Blog</a></li>
        <li><a class="page3 dot" data-href="about">About</a></li>
        <li><a class="page4 dot" data-href=contact>Contact</a></li>
    </ul>
</nav>

CSS

.active {
  font-weight: bold;
}

JavaScript

$('.click a').click(function(e){
	e.preventDefault();
  $(this).parent().addClass('active').siblings('li').removeClass('active');
  var id = $(this).data('href');
  $('html, body').animate({
      scrollTop: $("#" + id).offset().top
  }, 1000);
});