JSFiddle - React, Tailwind, and code Playground

by aastudio

HTML

<!-- NAVIGATION -->
<nav>
	<a href="#slide1">1</a>
	<a href="#slide12">2</a>
	<a href="#slide13">3</a>
	<a href="#slide14">4</a>
</nav>

<!-- CONTENT -->
<section id="slide11">
	<h1>Title 1</h1>
	<p>paragraph 1</p>
</section>

<section id="slide12">
	<h1>Title 2</h1>
	<p>paragraph 2</p>
</section>

<section id="slide13">
	<h1>Title 3</h1>
	<p>paragraph 3</p>
</section>

<section id="slide14">
	<h1>Title 4</h1>
	<p>paragraph 3</p>
</section>

CSS

section { 
  padding-top: 300px;
  min-height: 500px; 
  text-align: center; 
}

section:nth-child(2n) { background-color: #fff; }

h1 { font-size: 96px;}

nav { 
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%;
	background-color:#999; 
}

a { 
	color: #fff; 
	font-size: 20px; 
	margin:0 30px; 
}

JavaScript

$('a[href^="#"]').on('click', function(e){
  e.preventDefault();
    var anchor = $(this).attr('href'),
    sectionPosition = $(anchor).offset().top;
  $('html, body').animate({
    scrollTop: sectionPosition
  });	
});