JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slides">
    <div class="red transition:crossFade duration:1000">crossFade</div>
    <div class="green">default (fade)</div>
    <div class="blue transition:fadeThroughBackground duration:1000">fadeThroughBackground</div>
    <div class="red transition:blindRightFade duration:1000">blindRightFade</div>
    <div class="green transition:pushUp duration:2000">pushUp</div>
    <div class="blue transition:pushDown duration:500">pushDown</div>
</div>
<h2>Events</h2>
<p>
    <span id="onShow">show</span>
    <span id="onShowComplete">showComplete</span>
    <span id="onPlay">play</span>
    <span id="onPause">pause</span>
    <span id="onReverse">reverse</span>
</p>
<h2>Methods</h2>
<p>
    <button id="pause">pause</button>
    <button id="play" disabled="disabled">play</button> 
    <button id="reverse">reverse</button> &nbsp; 
    <button id="showNext" disabled="disabled">showNext</button>
    <button id="showPrevious" disabled="disabled">showPrevious</button>
    <button id="show" disabled="disabled">show slide 5</button>
</p>

CSS

div#slides {
    width: 500px;
    height: 280px;
    overflow: hidden;
    border: solid 5px #000;
}

div#slides div {
    height: 280px;
    width: 500px;
    font-size: 40px;
    line-height: 200px;
    text-align: center;
    color: #fff;
}

/* @group global */

body {
    font-family: Helvetica, arial;
    background: #fff;
}

p#links {
    padding-top: 50px;
    clear: both;
}

a#avatar {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

a#avatar img {
    border: none;
}

h1 {
    margin-top: 1em;
    color: #0094d5;
}

h2 {
    margin-top: 1em;
    color: #43aa38;
}

a {
    color: #0094d5;
}

a:visited, a:hover {
    color: #00577e;
}

.red {
    background: #e40053;
}

.blue {
    background: #0094d5;
}

.green {
    background: #43aa38;
}

/* @end */

JavaScript

var mySlideShow;

window.addEvent('domready',function(){
    
    // instance with a few options
    mySlideShow = new SlideShow('slides',{
        delay: 2000,
        autoplay: true
    });
    
    // Event demonstration
    mySlideShow.addEvents({
        onShow: function(){ $('onShow').highlight(); },
        onShowComplete: function(){ $('onShowComplete').highlight(); },
        onReverse: function(){ $('onReverse').highlight(); },
        onPlay: function(){ $('onPlay').highlight(); },
        onPause: function(){ $('onPause').highlight(); }
    });
    
    // the rest of the demo showing how to control the instance
    var toggled = [$('show'), $('showNext'), $('showPrevious')];
    
    $('pause').addEvent('click',function(){
        
        mySlideShow.pause();
        
        toggled.each(function(button){ button.set('disabled', false);    });
        this.set('disabled', true);
        $('play').set('disabled', false);
        $('reverse').set('disabled', true);
    });
    
    $('play').addEvent('click',function(){
        mySlideShow.play();
        
        toggled.each(function(button){
            button.set('disabled', true);
        });
        this.set('disabled', true);
        $('pause').set('disabled', false);
        $('reverse').set('disabled', false);
    });
    
    $('reverse').addEvent('click',function(){
        mySlideShow.reverse();
    });
    
    $('show').addEvent('click',function(){
        mySlideShow.show(mySlideShow.slides[4]);
    });
    
    $('showNext').addEvent('click',function(){
        mySlideShow.showNext();
    });
    
    $('showPrevious').addEvent('click',function(){
        mySlideShow.showPrevious();
    });
    
});

// Dependency on Loop.js

/*
---

script: Loop.js

description: Runs a class method on a periodical

license: MIT-style license.

authors: Ryan Florence <http://ryanflorence.com>

docs: http://moodocs.net/rpflo/mootools-rpflo/Loop

requires:
- core:1.2.4/'*'

provides: [Loop]

...
*/

var...