JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="menu">
	<ul>
		<li><a href="#block1">Link 1</a></li>
		<li><a href="#block2">Link 2</a></li>
		<li><a href="#block3">Link 3</a></li>
		<li><a href="#block4">Link 4</a></li>
	</ul>
</nav>

<div id="block1" class="block">Block 1</div>
<div id="block2" class="block">Block 2</div>
<div id="block3" class="block">Block 3</div>
<div id="block4" class="block">Block 4</div>

CSS

.block {
  color: #fff;
  height: 300px;
  background: #000;
  padding: 10px 0 0 10px;
  border-bottom: 1px solid #fff;
}

JavaScript

$(document).ready(function(){
	$(".menu a").on("click", function (e) {
		e.preventDefault();

		var id  = $(this).attr('href'),
    top = $(id).offset().top;
		
		$('body,html').animate({scrollTop: top}, 1500);
	});
});