JSFiddle - React, Tailwind, and code Playground

by StepBaro

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
<div id='fullpage'>
    <div class="section" id="home">
        <div class='container '>
			<h1>
				Test of text
			</h1>
            <img class='center-block index_logo img-responsive' style='position:relative; top:0;' src='https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/220px-Wikipedia_Logo_1.0.png' />
			
        </div>
    </div>
    <div class="section" id="second">
        <div class='container'>
			<h1>
				Test of text
			</h1>
            <img class='center-block index_logo img-responsive' style='position:relative; top:0;' src='https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/220px-Wikipedia_Logo_1.0.png' />

        </div>
    </div>
</div>

CSS

html {
	opacity:0;
}

JavaScript

$(document).ready(function() {
    $('#fullpage').fullpage({
        sectionsColor: ['#1bbc9b', '#f5fbfd'],
        anchors: ['home', 'about'],
        navigation: true,
        scrollingSpeed: 850,
        animateAnchors: true,
        navigationPosition: 'right',
        responsiveWidth: 900,
        afterResponsive: function(isResponsive) {

        },
		afterRender: function() {
			$('html').animate({'opacity': 1}, 1000);
		}
		
    });
});