JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css">
<script src="https://rawgithub.com/rochal/jQuery-slimScroll/master/jquery.slimscroll.min.js"></script>
<script src="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<script src="http://alvarotrigo.com/fullPage/vendors/jquery.easings.min.js"></script>
<div id="fullpage">
    <div class="section " id="section0">
        <div class="intro">
            <img src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/1.png" alt="1" />
            	<h1>Normal scrolling</h1>

            <p>With a linked menu</p>
        </div>
    </div>
    <div class="section" id="section1">
      
        <div class="slide" id="slide1">
              <div class="intro">
            	<h1>URL get updated (#)</h1>

            <p>Easy to bookmark and share</p>
        </div>
        </div>
        <div class="slide" id="slide2">
            <img src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/iphone-blue.png" alt="iphone" id="iphone-two" />
        </div>
    </div>
    <div class="section" id="section2">
        <div class="intro">
            	<h1>Just use </h1>

            <p>autoScrolling:false</p>
        </div>
    </div>
</div>

CSS

@CHARSET"ISO-8859-1";

/* Reset CSS
 * --------------------------------------- */
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    padding: 0;
    margin: 0;
}
a {
    text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset, img {
    border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-weight: normal;
    font-style: normal;
}
strong {
    font-weight: bold;
}
ol, ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q:before, q:after {
    content:'';
}
abbr, acronym {
    border: 0;
}
/* Custom CSS
 * --------------------------------------- */
 body {
    font-family: arial, helvetica;
    color: #333;
    color: rgba(0, 0, 0, 0.5);
}
.wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    position: relative;
}
h1 {
    font-size: 6em;
}
p {
    font-size: 2em;
}
.intro {
    position: fixed;
    -webkit-perspective: 1000;
    z-index:1;

}
.intro p {
    width: 50%;
    margin: 0 auto;
    font-size: 1.5em;
}
.section {
    text-align:center;
    position: relative;
}

JavaScript

$(document).ready(function () {
    $('#fullpage').fullpage({
        menu: '#menu',
        anchors: ['firstPage', 'secondPage', '3rdPage'],
        sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],

    });
});