JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://alvarotrigo.com/fullPage/jquery.fullPage.css">
<script src="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<div class="section" id="section_up" data-anchor="up"><h1>Section Up</h1><a href="#middle"><div class="controlArrow down"></div></a></div>
<div class="section active" id="section_middle" data-anchor="middle">
<div class="slide">
<h1>Slide Left</h1>
</div>
<div class="slide active">
<a href="#up"><div class="controlArrow up"></div></a>
<h1>Slide Center</h1>
<a href="#down"><div class="controlArrow down"></div></a>
</div>
<div class="slide">
<h1>Slide Right</h1>
</div>
</div>
<div class="section" id="section_down" data-anchor="down"><a href="#middle"><div class="controlArrow up"></div></a><h1>Section Down</h1></div>
CSS
body {
color: #fff;
}
h1 {
font-size:3em;
}
.section {
text-align: center;
}
#section_up {
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);
}
#section_middle {
background: -webkit-gradient(linear, top left, bottom left, from(#969ac6), to(#92a1ca));
background: -webkit-linear-gradient(#969AC6, #92A1CA);
background: linear-gradient(#969AC6, #92A1CA);
}
#section_down {
background: -webkit-gradient(linear, top left, bottom left, from(#92a1ca), to(#76c2bd));
background: -webkit-linear-gradient(#92A1CA, #76C2BD);
background: linear-gradient(#92A1CA, #76C2BD);
}
.controlArrow.up {
left:50%;
top: 50px;
margin-left:-38.5px;
width: 0;
height:0;
border-width: 0 34px 38.5px 34px;
border-color: transparent transparent #fff transparent;
}
.controlArrow.down {
left:50%;
top:100%;
width:0;
height:0;
margin-left:-38.5px;
border-width: 38.5px 34px 0 34px;
border-color: #fff transparent transparent transparent;
}
JavaScript
$.fn.fullpage({
autoscrolling: false,
});