JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
		
			<div id="section1">
			
				<div style="height:100%;background:#333;"></div>
				
				<div style="height:100%;background:#000;"></div>
				
				<div style="height:100%;background:#333;"></div>
				
				<nav class="slide-dots">
					<span class="slide-dot"></span>
					<span class="slide-dot"></span>
					<span class="slide-dot"></span>
					<span class="slide-dot-fake"></span>
				</nav>
			
			</div>
			
			<div id="section2">
			
				<div style="height:2000px;"></div>
				
				<div style="height:320px;background:purple;"></div>
			
			</div>
			
		</div>

CSS

*
			{
				margin: 0;
				padding: 0;
				outline: 0;
			}
		
			html,
			body
			{
				height: 100%;
				overflow: hidden;
			}
			
			#wrap
			{
				height: 100%;
				overflow: hidden;
			}
		
			#section1
			{
				height: 100%;
				background: #00aeff;
				overflow-y: auto;
				-webkit-transition: all .3s ease-in-out;
			}
			
			#section2
			{
				height: 100%;
				background: #ffffff;
				overflow-y: auto;
				-webkit-transition: all .3s ease-in-out;
			}
			
			.shifted #section1
			{
				-webkit-transform: translate(0px, -100%);
				-webkit-transition: all .3s ease-in-out;
			}
			
			.shifted #section2
			{
				-webkit-transform: translate(0px, -100%);
				-webkit-transition: all .3s ease-in-out;
			}
			
			.slide-dots
			{
				position: absolute;
				top: 50%;
				left: 40px;
				text-align: center;
				z-index: 9999;
			}
				.slide-dots .slide-dot
				{
					width: 12px;
					height: 12px;
					background: rgba(255,255,255,.6);
					display: block;
					margin: 20px 0;
					border-radius: 50%;
					border: transparent 2px solid;
					-webkit-box-sizing: border-box;
					
					-moz-background-clip: content;
					-webkit-background-clip: content;
					background-clip: content-box;
					
					-webkit-transition: all .3s ease-in-out;
					
					cursor: pointer;
					
				}
				
				.slide-dots .slide-dot-fake
				{
					width: 12px;
					height: 12px;
					background: rgba(255,255,255,.6);
					display: block;
					margin: 20px 0;
					border-radius: 50%;
					border: transparent 2px solid;
					-webkit-box-sizing: border-box;
					
					-moz-background-clip: content;
					-webkit-background-clip: content;
					background-clip: content-box;
					
					-webkit-transition: all .3s ease-in-out;
					
					cursor: pointer;
					
					margin-top:40px;
					background-color:purple;
				}
				
				
				.slide-dots .slide-dot:hover
				{
					background-color: #ffffff;
				}
				
				.slide-dots .slide-dot.active
				{
					border-color:...

JavaScript

var listen = true;
		
			function nextSlide()
			{
				$('#section1').stop(true,false).animate({
					scrollTop: $('#section1').scrollTop() + $(window).height()
				});
			}
			
			function prevSlide()
			{
				$('#section1').stop(true,false).animate({
					scrollTop: -$('#section1').scrollTop() + $(window).height()
				});
			}
			
			function showSlide(index)
			{
				var offset = $('#section1 div').eq(index).offset();
					offset = offset.top;
				if(offset){
					listen = false;
					$('.slide-dot').removeClass('active');
					$('.slide-dot').eq(index).addClass('active');		
					$('#section1').stop(true,false).animate({
						scrollTop: offset
					}, 500, function(){
						listen = true;
					});
				} else {
					alert('error');
				}
			}
		
			$(document).ready(function(){
				
				var fullHeight = 0;
				
				$('#section1 div').each(function(){
					fullHeight = fullHeight + $(this).height();
				});
				
				var lastScrollTop1 = 0;
				$('#section1').on('scroll', function(e){
					var st = $(this).scrollTop();
					if (st > lastScrollTop1){
						if( $('#section1').scrollTop() + $(window).height() == fullHeight) {
							if(listen){
								$('body').addClass('shifted');
							}
						}
					}
					lastScrollTop1 = st;
				});
				
				$('#section1').on('mousewheel', function(e){
					e.preventDefault();
					var st = $(this).scrollTop();
					if (st > lastScrollTop1){
						nextSlide();
					} else {
						prevSlide();
					}
				});
				
				var lastScrollTop2 = 0;
				$('#section2').on('scroll', function(e){			
					var st = $(this).scrollTop();
					if (st > lastScrollTop1){
					} else {	
						if( st == 0 ){
							$('body').removeClass('shifted');
						}
					}
					lastScrollTop1 = st;
				});
				
				$('.slide-dots').css({'margin-top':-$('.slide-dots').height() / 2});	
				$('.slide-dot').first().addClass('active');
				
				$(document).on('click', '.slide-dot', function(e){
					e.preventDefault();
					showSlide( $(this).index()...