JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="fade-scroll">Fade me AWAY</h1>
		<p class="fade-scroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et erat congue, congue nulla eu, imperdiet diam. Pellentesque dignissim, arcu et dapibus luctus, metus velit sodales nisl, sit amet consequat nibh enim et eros. Donec efficitur enim quis lectus gravida, sed viverra lorem pellentesque. Pellentesque id viverra eros. Integer tempus vel ipsum vel elementum. Nam eget metus id magna scelerisque tincidunt. Morbi pellentesque tellus id dolor auctor, quis tempus justo accumsan. Quisque tincidunt quam at nulla euismod, non condimentum massa porttitor. Fusce rutrum vel libero at egestas. Proin sit amet pharetra arcu, in scelerisque leo.</p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

CSS

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Calibri;
}

h1 {
	height:100vh;
	font-weight: 300;
	font-size: 4em;
	color: #fff;
	background-color: #071d36;
}
p {
	width: 30%;
	margin: 0 auto 500px auto;
	font-size: 1.4em;
	color: #555;
	font-weight: 300;
}

JavaScript

$(function() {
                var documentEl = $(document), fadeElem = $('.fade-scroll');
                
                documentEl.on('scroll', function() {
                    var currScrollPos = documentEl.scrollTop();
                    
                    fadeElem.each(function() {
                        var $this = $(this),
                            elemOffsetTop = $this.offset().top;
                        if (currScrollPos > elemOffsetTop) $this.css('opacity', 1 - (currScrollPos-elemOffsetTop)/400);
                    }); 
                });
                
            });