JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<section id="intro">
    <div class="content">
        <h1>Intro</h1>
    </div>
</section>
<section id="features">
    <div class="content">
        <h1>Features</h1>
    </div>
</section>
<section id="gallery">
    <div class="content">
        <h1>Gallery</h1>
    </div>
</section>
<section id="contact">
    <div class="content">
        <h1>Contact Us</h1>
    </div>
</section>

CSS

* {
  box-sizing: border-box; 
  color: #fff;
}
html,body{
	margin:0;
	padding:0;
}
section{
	position:fixed;
	display: table;
	width: 100%;
	height: 100%;
	min-width:100%;
	min-height:100%;
	max-width:100%;
	max-height:100%;
	overflow:hidden;
	left:0;
	top:0;
	padding: 0 7%;
	margin: 0;
	background-color: #373B44;
}
.content {
  display: table-cell;
  vertical-align: middle;
}
#intro {
	background-color: #3F51B5;
	z-index:999;
}
#features {
	background-color: #f44336;
	z-index:998;
}
#gallery {
	background-color: #673AB7;
	z-index:997;
}
#contact {
	background-color: #4CAF50;
	z-index:996;
}

JavaScript

$(document).ready(function(){
    sections=["intro","features","gallery","contact"]
    cs=0;
    $(window).on('mousewheel DOMMouseScroll', function(e){
                console.log(e.originalEvent.deltaY)
        if(e.originalEvent.detail > 0) {
            //scroll down - Show next section

            if(cs < (sections.length-1)){
            
                $("#"+sections[cs]).fadeOut();
                cs+=1;
                $("#"+sections[cs]).fadeIn();
            }
        }
        else{
            //scroll up - Show previous section
            if(cs > 0){
                $("#"+sections[cs]).fadeOut();
                cs-=1;
                $("#"+sections[cs]).fadeIn();
            }
        }
        return false;
    });
});