JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>slides</title>

</head>

<body>
<div>

<p>entry text</p>

<p class="nav"><a id="prev" href="#">Prev</a> | <a id="next" href="#">Next</a><span id="num"></span></p>


<div id="slides">
    <div>
        <img title="sky" src="http://www.brianfitzer.ie/files/gimgs/6_t6.jpg" alt="" width="700" height="461" />
        <p class="text">1. Description text to go underneath images in  slideshow...</p>
    </div>
    
    <div>
        <img title="taxsaver" src="http://www.brianfitzer.ie/files/gimgs/6_t5.jpg" alt="" width="700" height="461" />
        <p class="text">2. Description text to go underneath images in  slideshow...</p>
    </div>
    
    <div>
        <img title="taxsaver" src="http://www.brianfitzer.ie/files/gimgs/6_t7.jpg" alt="" width="700" height="461" />
        <p class="text">3. Description text to go underneath images in  slideshow...</p>
    </div>
</div>



</div>


</body>
</html>

CSS

body {
    font-size: 62.5%; 
    font-family: Arial, Helvetica, Verdana, sans-serif;
    background-color: #fff;
    text-align: left;
    color:#000;
    }

#num {padding-left: 6px;}

#slides {
position:relative;
}

.text {
font-size:20px;
}

JavaScript

$(document).ready(function(){ 
    $('#slides').cycle({
    fx:'fade', 
    speed:'2000', 
    timeout: 0, 
    next:'#next', prev:'#prev'});
    });



/*
 * jQuery Cycle Plugin for light-weight slideshows
 * Examples and documentation at: http://malsup.com/jquery/cycle/
 * Copyright (c) 2007 M. Alsup
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * @author:   M. Alsup
 * @version:  1.6 (8/14/2007)
 * @requires: jQuery v1.1.3.1 or later
 *
 * Based on the work of:
 *  1) Matt Oakes (http://portfolio.gizone.co.uk/applications/slideshow/)
 *  2) Torsten Baldes (http://medienfreunde.com/lab/innerfade/)
 *  3) Benjamin Sterling (http://www.benjaminsterling.com/experiments/jqShuffle/)
 */
(function($) {

$.fn.cycle = function(options) {
    return this.each(function() {
        if (options && options.constructor == String) {
            if (options == 'stop') {
                if (this.cycleTimeout) clearTimeout(this.cycleTimeout);
                this.cycleTimeout = 0;
                return;
            }
            options = { fx: options };
        }
        
        var $cont = $(this), $slides = $cont.children(), els = $slides.get();
        donum('1/' + els.length);
        if (els.length < 2) return; // don't bother

        var opts = $.extend({}, $.fn.cycle.defaults, options || {}, $.meta ? $cont.data() : {});
        if (opts.autostop) 
            opts.countdown = els.length;
            
        opts.before = opts.before ? [opts.before] : [];
        opts.after = opts.after ? [opts.after] : [];

        // allow shorthand overrides of width, height and timeout
        var cls = this.className;
        var w = parseInt((cls.match(/w:(\d+)/)||[])[1]) || opts.width;
        var h = parseInt((cls.match(/h:(\d+)/)||[])[1]) || opts.height;
        opts.timeout = parseInt((cls.match(/t:(\d+)/)||[])[1]) || opts.timeout;

        if ($cont.css('position') ==...