JSFiddle - React, Tailwind, and code Playground

by acturbo

HTML

<script src="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css">
<div class="section active" id="section0">
    <h1>Section 0</h1>
</div>
<div class="section" id="section1">
    <div class="nav">
        <span class="toSlide" data-index="1">Slide 1</span>
        <span class="toSlide" data-index="2">Slide 2</span>
        <span class="toSlide" data-index="3">Slide 3</span>
       
    </div>
    
    <div class="slide" >
        <h1>Slide 1</h1>
    </div>
    <div class="slide" >
        <h1>Slide 2</h1>
    </div>
    <div class="slide" >
        <h1>Slide 3 ac</h1>
    </div>
</div>
<div class="section" id="section2"> <h1>Section 3</h1></div>
<div class="section" id="section3"> <h1>Section 4</h1></div>

CSS

body{
    color: #fff;
}
h1{
    font-size:3em;
}
.section {
    text-align: center;
}
.nav{
    position:absolute;
    xposition:fixed;
    top: 10px;
    left: 10px;
    display:block;
    width: 100%;
}
.nav span{
    cursor:pointer;
}
#section0{
	background: -webkit-gradient(linear, top left, bottom left, from(#4bbfc3), to(#7baabe));
	background: -webkit-linear-gradient(#4BBFC3, #7BAABE);
	background: linear-gradient(#4BBFC3,#7BAABE);
}
#section1{
	background: -webkit-gradient(linear, top left, bottom left, from(#7baabe), to(#969ac6));
	background: -webkit-linear-gradient(#7BAABE, #969AC6);
	background: linear-gradient(#7BAABE,#969AC6);
}
#section2{
	background: -webkit-gradient(linear, top left, bottom left, from(#969ac6), to(#92a1ca));
	background: -webkit-linear-gradient(#969AC6, #92A1CA);
	background: linear-gradient(#969AC6,#92A1CA);
}
#section3{
	background: -webkit-gradient(linear, top left, bottom left, from(#92a1ca), to(#76c2bd));
	background: -webkit-linear-gradient(#92A1CA, #76C2BD);
	background: linear-gradient(#92A1CA,#76C2BD);
}

JavaScript

function orig(){
    $.fn.fullpage( );
}
function origplus(){
    
    $.fn.fullpage( {
        
        afterLoad: function(anchorLink, index){
            alert("afterLoad");
            
            //using index
            if(index == '0'){
                alert("Section 0 ended loading");
            }

            //using anchorLink
            if(anchorLink == 'secondSlide'){
                alert("Section 2 ended loading");
            }
        }    
    
    } );
}

$(document).ready(function() {
    orig();
    //origplus(); 
});