JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script>
$(document).ready(function(){
  $("a").click(function() {

		var ourclass = $(this).attr('class');
  
$('html, body').animate({
				scrollTop: $("#"+ourclass).offset().top-20
			}, 2000); 
});
});
  </script>
    <a  class="home">Home</a>
    <a  class="about">About</a>

    <div class="Home-section" id="home"><h1> Hello </h1>
      </div>

    <div class="About-section" id="about"><h1>Bye</h1>
      </div>

CSS

.Home-section {
  height:500px;
  background: deepskyblue;
  }

.About-section {
  height:300px;
  background:deeppink;
  }
  a{cursor:pointer}