JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
  <li><a href="#section-0"> home </a></li>
  <li><a href="#section-1"> about </a></li>
  <li><a href="#section-2"> services </a></li>
  <li><a href="#section-3"> gallery </a></li>
  <li><a href="#section-4"> contact </a></li>
</ul>

<div id="fullpage" class="fullpage">
  <div class="section" id="section-0">
    <h1>Home</h1>
  </div>
  <div class="section" id="section-1">
    <h1>About</h1>
  </div>
  <div class="section" id="section-2">
    <h1>Services</h1>
  </div>
  <div class="section" id="section-3">
    <h1>Gallery</h1>
  </div>
  <div class="section" id="section-4">
    <h1>Contact</h1>
  </div>
</div>

CSS

#menu {
	position: fixed;
	z-index: 1050;	
	float: right;  
  right:0
}
ul{ list-style:none}
li{ float:left;margin-left:25px}
.fullpage {
	position: absolute;
	width: 100%;
	height: 100%;
}
.section {
	position: relative;
	width: 100%;
	height: 100%;
	float: left;
	border: 2px solid #FFFFFF;
	margin: 0 !important;
}

JavaScript

jQuery.scrollTo = function (target, offset, speed, container) {

    if (isNaN(target)) {

        if (!(target instanceof jQuery))
            target = $(target);

        target = parseInt(target.offset().top);
    }

    container = container || "html, body";//html, body
    if (!(container instanceof jQuery))
        container = $(container);

    speed = speed || 500;
    offset = offset || 0;

    container.animate({
        scrollTop: target + offset
    }, speed);
};





		$("#menu li a").click(function(e) {
		
			// e.preventDefault();
			var target = $(this).attr('href');
			
			$.scrollTo(target);        
			
			return false;
		});