JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js"></script>
<div id="nav">
    <ul id="nav-links">
        <li><a href="#group2">About</a></li>
        <li><a href="#group4">News</a></li>
        <li><a href="#group6">Events</a></li>
        <li><a href="#group7">Contact</a></li>
    </ul>
</div>
<div class="parallax">

    <!-- GROUP 1 -->
	<div id="group1" class="parallax__group">
    
    	<div class="parallax__layer parallax__layer--base">
        
        	<div class="title">
        	
        		<img src="images/provonix-logo-2.png">
        		
        		<p id="subtitle">
        			<strong>Provonix</strong> is a contract research organization that provides innovative <strong>statistical, programming, and data analysis solutions</strong> to meet the complex needs of pharmaceutical, biotechnology, and medical device companies.
        		</p>
        		
        		<div id="two-circles">
        			
        			<div id="left-circle" style="padding-right: 40px;">
        				<img src="images/statistics-final.png">
        				<p class="caption">Statistics</p>
        			</div>
        		
        			<div id="right-circle">
        				<img src="images/statistical-programming-final.png">
        				<p class="caption">Statistical<br>Programming</p>
        			</div>
        			
        		</div>
        	
			</div>
		
    	</div>
    	
    </div><!-- end GROUP 1 -->
    
    <!-- GROUP 2 -->
	<div id="group2" class="parallax__group">
	
    	<div class="parallax__layer parallax__layer--base">
    	</div>
    	
    	<div class="parallax__layer parallax__layer--back">
    	
    		<div class="block">
    	
    			<div class="icon">
        			<img src="images/statistics-final.png">
        			<p class="caption">Statistics</p>
        		</div>
        	
        		<div class="text">
        			The goal of our programming staff is to ensure that each table, listing, and figure created is accurate and clear, and adheres to...

CSS

@charset "UTF-8";
/* CSS Document */

* {
	margin:0;
	padding:0;
}

body, html {
	overflow-x: hidden;
}

	.parallax {
		height: 100%; /* fallback for older browsers */
		height: 100vh;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-perspective: 300px;
		perspective: 300px;
	}
	
		.parallax__group {
			position: relative;
			height: 100%; /* fallback for older browsers */
			height: 100vh;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
	
			.parallax__layer {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}
	
				.parallax__layer--fore {
					-webkit-transform: translateZ(90px) scale(.7);
					transform: translateZ(90px) scale(.7);
					z-index: 1;
				}
	
				.parallax__layer--base {
					-webkit-transform: translateZ(0);
					transform: translateZ(0);
					z-index: 4;
				}
	
				.parallax__layer--back {
					-webkit-transform: translateZ(-300px) scale(2);
					transform: translateZ(-300px) scale(2);
					z-index: 3;
				}
	
				.parallax__layer--deep {
					-webkit-transform: translateZ(-600px) scale(3);
					transform: translateZ(-600px) scale(3);
					z-index: 2;
				}
				
				.fancyBox {
					display: none;
				}

/* demo styles
--------------------------------------------- */


body {
	font: 100% / 1.5 Arial;
}


.parallax {
	font-size: 200%;
}

/* centre the content in the parallax layers */
.title {
	color: #444;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/* style the groups
--------------------------------------------- */

#nav {
	background: url('images/navbar.png') no-repeat;
	font-size: 20px;
	height: 30px;
	margin-right: 15px;
	padding-right: 10px;
	position: fixed;
	right: 0;
	text-align: right;
	top: 0;
	width: 420px;
	z-index: 1000;
}
	
	#nav-links li {
		display: inline;
		padding: 0 10px;
	}
	
		#nav-links li a {
			color: #efefef;
			text-decoration:...

JavaScript

$('#nav-links li a').click(function() {
        $('.parallax').scrollTo($(this).attr('href'), {duration: 3000});
    });