JSFiddle - React, Tailwind, and code Playground

HTML

<div id="body-inner">

  <nav id="nav">
    <ul>
      <li><a href="#section-1">Section 1</a></li>
      <li><a href="#section-2">Section 2</a></li>
      <li><a href="#section-3">Section 3</a></li>
    </ul>
  </nav>

  <div id="content-wrap">

    <div id="hero">
      <h1>Hero</h1>
    </div>

    <div id="section-1" class="section">
      <h2>Section 1</h2>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam consectetur fuga nam eligendi placeat natus consequuntur ab ea tenetur odit, minima, vel. Eaque accusantium atque molestias praesentium. Dolorem dolores dolor nobis obcaecati, iure officiis ipsa pariatur quibusdam sint placeat non soluta eius tempore quis, in saepe natus sit debitis, laboriosam voluptatibus iusto laborum ratione. Officiis adipisci neque illum, repellat cupiditate dolores nam ducimus itaque voluptatum maiores, sed a voluptates rerum temporibus quo at ipsa facilis suscipit non. Quasi quisquam est facilis eaque explicabo a commodi esse blanditiis impedit consectetur dolores repellendus error culpa libero ab molestias, quis eos laudantium voluptatem!
    </div> <!-- /.section -->

    <div id="section-2" class="section">
      <h2>Section 2</h2>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam consectetur fuga nam eligendi placeat natus consequuntur ab ea tenetur odit, minima, vel. Eaque accusantium atque molestias praesentium. Dolorem dolores dolor nobis obcaecati, iure officiis ipsa pariatur quibusdam sint placeat non soluta eius tempore quis, in saepe natus sit debitis, laboriosam voluptatibus iusto laborum ratione. Officiis adipisci neque illum, repellat cupiditate dolores nam ducimus itaque voluptatum maiores, sed a voluptates rerum temporibus quo at ipsa facilis suscipit non. Quasi quisquam est facilis eaque explicabo a commodi esse blanditiis impedit consectetur dolores repellendus error culpa libero ab molestias, quis eos laudantium voluptatem!
    </div> <!-- /.section -->

    <div id="section-3"...

CSS

body {
  margin: 0;
  height: 100%;
}


/* Nav */
#nav { 
  position: fixed;
	top: 0;
	left: 0;
	width: 100%;
  background-color: #222;
  z-index: 99998;
}
#nav ul { 
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
	margin: 0;
  padding: 0;
  list-style: none;
}
#nav ul li { 
  margin: 0 10px;
}
#nav ul li a { 
  color: #FFF;
}

/* Hero */
#hero { 
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #000;
  color: #fff;
}

/* Scroll container */
#scroll-container { 
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* Section */
.section { 
  height: 100vh;
	padding: 40px;
}
#section-1 { 
	background-color: #da6f6f;
}
#section-2 { 
	background-color: #daad6f;
}
#section-3 { 
	background-color: #dad56f;
}

/* Footer */
#footer { 
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  background-color: #222;
}
#footer a { 
  color: #FFF;
}

JavaScript

$('a[href^="#"]')
	.not('[href$="#"]')
	.not('[href$="#0"]')
	.on("click", function() {

	var $offset = $("#nav").height();
	var target = this.hash;

	$("html, body").stop().animate({
    scrollTop: $(target).offset().top - $offset
  }, 1000, function() {
    window.location.hash = target; // Enable hash links
  });

	return false;
});