JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cycle-slideshow" data-cycle-fx=fade data-cycle-timeout=50000 data-cycle-pager="#no-template-pager" data-cycle-slides="div" data-cycle-pager-template="">
<div id="tab1"><h1>Test Slide One</h1></div>
<div id="tab2"><h1>Test Slide Two</h1></div>
<div id="tab3"><h1>Test Side Three</h1></div>
<div id="tab4"><h1>Test Slide Four</h1></div> 
</div>
<div id="no-template-pager">
<div class="tab1"><p>Lorem ipsum dolor sit amet.</p><p><a href="http://www.google.com">Test Link</a></p> </div>

<div class="tab2"><p>Lorem ipsum dolor sit amet.</p><p><a href="http://www.google.com">Test Link</a></p> </div>

<div class="tab3"><p>Lorem ipsum dolor sit amet.</p><p><a href="http://www.google.com">Test Link</a></p> </div>

<div class="tab4"><p>Lorem ipsum dolor sit amet.</p><p><a href="http://www.google.com">Test Link</a></p> </div>
</div>

CSS

body {margin:0;padding:0;}
.cycle-slideshow { display:block;height:220px;margin:0;padding:40px 0;border-bottom:solid 1px #000;clear:both;width:100%;}
.cycle-slideshow h1 {color:#fff;font: 300 58px/68px 'Raleway', sans-serif;margin:0 auto;max-width:940px;padding-top:60px;letter-spacing:2px;}
.cycle-slideshow #tab1 {background:#A90000;display:block;height:300px;width:100%;}
.cycle-slideshow #tab2 {background:#2D4186;display:block;height:300px;width:100%;text-align:center;}
.cycle-slideshow #tab3 { background:#D96D00;display:block;height:300px;width:100%;text-align:center;}
.cycle-slideshow #tab4 {background:#698C00;display:block;height:300px;width:100%;}

#no-template-pager {  margin: 0;padding:0;font:400 14px/24px 'Raleway', Tahoma, sans-serif; }
#no-template-pager div { width: 200px; float: left; list-style: none;display:block;cursor: pointer; padding: 0 10px;margin:20px 5px 10px;z-index:1;position:relative;}
#no-template-pager a {text-decoration:none;color:#545454;}
#no-template-pager h2 {font: 700 20px/68px 'Raleway', Tahoma, sans-serif;margin:0;color:#545454;letter-spacing:1px;}
#no-template-pager div.tab1.cycle-pager-active h2, #no-template-pager div.tab2.cycle-pager-active h2, #no-template-pager div.tab3.cycle-pager-active h2, #no-template-pager div.tab4.cycle-pager-active h2 {color:#fff!important;z-index:9999;display:block;position:relative;} 
#no-template-pager .cycle-pager-active a {color:#fff!important;z-index:9999;display:block;position:relative;} 

#no-template-pager div.tab1.cycle-pager-active { background: #A90000;color:#fff;border-radius: 10px 10px 0 0;position:relative;z-index:1;}
#no-template-pager div.tab2.cycle-pager-active  { background: #2D4186;color:#fff;border-radius: 10px 10px 0 0;position:relative;}
#no-template-pager div.tab3.cycle-pager-active  { background: #D96D00;color:#fff;border-radius: 10px 10px 0 0;position:relative;}
#no-template-pager div.tab4.cycle-pager-active  { background: #698C00;color:#fff;border-radius: 10px 10px 0...

JavaScript

/*!
* jQuery Cycle2; version: 2.1.2 build: 20140216
* http://jquery.malsup.com/cycle2/
* Copyright (c) 2014 M. Alsup; Dual licensed: MIT/GPL
*/

/* Cycle2 core engine */
;(function($) {
"use strict";

var version = '2.1.2';

$.fn.cycle = function( options ) {
    // fix mistakes with the ready state
    var o;
    if ( this.length === 0 && !$.isReady ) {
        o = { s: this.selector, c: this.context };
        $.fn.cycle.log('requeuing slideshow (dom not ready)');
        $(function() {
            $( o.s, o.c ).cycle(options);
        });
        return this;
    }

    return this.each(function() {
        var data, opts, shortName, val;
        var container = $(this);
        var log = $.fn.cycle.log;

        if ( container.data('cycle.opts') )
            return; // already initialized

        if ( container.data('cycle-log') === false || 
            ( options && options.log === false ) ||
            ( opts && opts.log === false) ) {
            log = $.noop;
        }

        log('--c2 init--');
        data = container.data();
        for (var p in data) {
            // allow props to be accessed sans 'cycle' prefix and log the overrides
            if (data.hasOwnProperty(p) && /^cycle[A-Z]+/.test(p) ) {
                val = data[p];
                shortName = p.match(/^cycle(.*)/)[1].replace(/^[A-Z]/, lowerCase);
                log(shortName+':', val, '('+typeof val +')');
                data[shortName] = val;
            }
        }

        opts = $.extend( {}, $.fn.cycle.defaults, data, options || {});

        opts.timeoutId = 0;
        opts.paused = opts.paused || false; // #57
        opts.container = container;
        opts._maxZ = opts.maxZ;

        opts.API = $.extend ( { _container: container }, $.fn.cycle.API );
        opts.API.log = log;
        opts.API.trigger = function( eventName, args ) {
            opts.container.trigger( eventName, args );
            return opts.API;
        };

        container.data( 'cycle.opts',...