JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://julian.com/research/blast/build/jquery.blast.js"></script>
<script src="http://julian.com/research/velocity/build/velocity.js"></script>
<script src="http://julian.com/research/velocity/build/velocity.ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.5.8/jquery.fullPage.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.5.8/jquery.fullPage.min.css">
<div class="home-section-container">
    <div class="each-section">
        <div class="home-slider-container">
            <div class="home-slider-navigation">	<a class="prev" href="#">&lt;</a>
	<a class="next" href="#">&gt;</a>

            </div>
            <div class="home-slider" style="position: relative; height: 324px;">
                <div class="each-slide cycle-slide cycle-slide-active">
                    <div style="background-image:url('http://chinablog.cc/wp-content/gallery/scenic_china/mountain/ii/yangmaiyong.jpg');-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-position:center center;min-height:100%;min-width:100%;"></div>
                    <img src="http://placehold.it/1x1" style="display:none;">
                </div>
                <div class="each-slide text">
                    <div style="background-color:#DCEDE7;">
                        <div class="text-container animated">
                            	<h2 style="color:#000000;">
						A  new identity, a huge mural, the word YES on a wall, collaborating with students, working in print, film and online for one of the best art institutions in the north of England.					</h2>

                        </div>
                        <img src="http://placehold.it/1x1" style="display:none;">
                    </div>
                </div>
            </div>
            <div class="home-slider-pager"></div>
      ...

CSS

.each-slide.text > div {
    width: 100%;
    height: 100%;
}
.each-slide.text .text-container {
    padding: 10px;
    opacity: 0;
}
.each-slide.text .text-container h2 {
    font-family:'Circular-Medium', sans-serif;
    font-size: 62px;
    width: 95%;
    line-height: 1.1em;
    color: #000000;
    margin: 0;
}
.home-slider-container {
    height: 100%;
    width: 100%;
}
.home-slider-container .home-slider {
    height: 100%;
    width: 100%;
}
.home-slider-container .home-slider .each-slide {
    height: 500px;
    width: 100%;
}
.home-slider-container .home-slider-navigation a {
    font-family:'Georgia', 'Times New Roman', serif;
    background: #ffffff;
    display: inline-block;
    color: #999999;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.home-slider-container .home-slider-navigation a:hover {
    background: #ffff00;
}
.home-slider-container .home-slider-navigation a.prev {
    position: absolute;
    padding: 10px 16px 10px 15px;
    top: 50%;
    right: 41px;
    z-index: 999;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}
.home-slider-container .home-slider-navigation a.next {
    position: absolute;
    padding: 10px 15px 10px 16px;
    top: 50%;
    right: 0;
    z-index: 999;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}
.home-slider-container .home-slider-pager {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 999;
}

JavaScript

//
if ($('.home-section-container').length > 0) {
    $('.home-section-container').fullpage({
        sectionSelector: '.each-section',
        scrollingSpeed: 1000,
        resize: false,
        onLeave: function () {
            //
        },
        afterLoad: function () {
            //
        }
    });
}

//
function featuredProjectTextAnimation(incomingSlideEl) {
    var $animated = $(incomingSlideEl).find('.text-container.animated');
    $animated.blast({
        delimiter: 'word'
    })
        .velocity('transition.fadeIn', {
        display: null,
        duration: 0,
        stagger: 100,
        delay: 400,
        begin: function () {
            $animated.css('opacity', 1);
        },
        complete: function () {
            //
        }
    });
}

//
if ($('.home-slider-container').length > 0) {
    $('.home-slider-container .home-slider').each(function () {
        var $this = $(this);
        var slideCount = $this.find('.each-slide').length;
        if (slideCount <= 1) {
            $this.next('.home-slider-pager').remove();
            $this.prev('.home-slider-navigation').remove();
        }
        $this.cycle({
            fx: 'fade',
            slides: '> .each-slide',
            caption: $this.next('.home-slider-pager'),
            captionTemplate: '{{slideNum}}/{{slideCount}}',
            sync: true,
            timeout: 0,
            random: false,
            pagerActiveClass: 'active',
            next: $this.prev('.home-slider-navigation').find('.next'),
            prev: $this.prev('.home-slider-navigation').find('.prev'),
            loader: true,
            autoHeight: 'container',
            swipe: true
        });
        $this.on('cycle-before', function () {

        });
        $this.on('cycle-after', function (event, optionHash, outgoingSlideEl, incomingSlideEl) {
            featuredProjectTextAnimation(incomingSlideEl);
            $(outgoingSlideEl).find('.text-container.animated').css('opacity', 0);
       ...