JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.js"></script>
<link rel="stylesheet" href="http://alvarotrigo.com/fullPage/jquery.fullPage.css">
<div class="section" id="section1">
    <div class="slide black">
        <div class="intro">
            	<h1>Simple</h1>
            <p>Easy to use. Configurable and customizable.</p>
        </div>
    </div>
    
    <div class="slide gray">
        <div class="intro">
             <h1>Cool</h1>
            <p>It just looks cool. Impress everybody with a simple and modern web design!</p>
        </div>
    </div>
    
    <div class="slide gray">
        <div class="intro">
             <h1>Compatible</h1>

            <p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
        </div>
    </div>
    
    <!--slide arrow controls rendered here by jQuery.fullPage.js -->
</div>
<!-- // section -->

CSS

body {
    font-size: 100%;
}
.section {
    padding: 0;
}
.slide.gray {
    background: #888;
    color: #fff;
}
.slide.black {
    background: #000;
    color: #fff;
}
.intro {
    padding: 0 10%;
    font-size: 1.9em;
}

JavaScript

$(document).ready(function () {
          var pepe = $.fn.fullpage({
              'css3': true,
                  "verticalCentered": true
          });
      });


      $('.controlArrow').on('click', function () {
          $('.slide').each(function () {
              if ($(this).hasClass('black', 'active')) {
                  $('.black.active').closest('.section').children('.controlArrow').addClass('black').removeClass('gray');
              } else {
                  if ($(this).hasClass('gray', 'active')) {
                      $('.gray.active').closest('.section').children('.controlArrow').addClass('gray').removeClass('black');
                  }
              }

          });
      });