JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="container">
  <div id="header">
    <div id="logoWrap">
      <h1>jFlow Plus v2 <span>By Devin Walker, WordImpressed</span></h1>
    </div>
  </div>
  <!--
  **********************************************
  Start of jFlow DOM
  **********************************************
  -->
  <div id="sliderContainer">
    <div id="mySlides">
      <div id="slide1" class="slide"> <img src="http://wordimpress.com/demos/jflowplus-v2/images/jflow-sample-slide1.jpg" alt="Slide 1 jFlow Plus" />
        <div class="slideContent">
          <h3>You Asked, jFlow Delivered</h3>
          <p>It's all about the Community and giving back.  To keep with this tradition, jFlow Plus now has more of the features you want.</p>
        </div>
      </div>
      <div id="slide2" class="slide"> <img src="http://wordimpress.com/demos/jflowplus-v2/images/jflow-sample-slide2.jpg" alt="Slide 2 jFlow Plus" />
        <div class="slideContent">
          <h3>W3C Valid</h3>
          <p>Are you a stickler for writing valid code?  So is jFlow.  Run this puppy through W3C's validator to see it pass the test!</p>
        </div>
      </div>
      <div id="slide3" class="slide"> <img src="http://wordimpress.com/demos/jflowplus-v2/images/jflow-sample-slide3.jpg" alt="Slide 3 jFlow Plus" />
        <div class="slideContent">
          <h3>Frequent Code Updates</h3>
          <p>This slider is actively developed and used by thousands of websites.  More features coming soon including more effects and options.</p>
        </div>
      </div>
      <div id="slide4" class="slide"> <img src="http://wordimpress.com/demos/jflowplus-v2/images/jflow-sample-slide4.jpg" alt="Slide 3 jFlow Plus" />
        <div class="slideContent">
          <h3>Notice the Slide Navigation?</h3>
          <p>That's a new feature.  Click on the paging buttons in the top-right to quickly jump to any jFlow slide number.</p>
        </div>
      </div>
    </div>
    <div id="myController"> 
        <div...

CSS

/* 

jFlow Plus Demo CSS 

Description: Demo styles NOT for use with jFlow Plus

Creator: Devin Walker

Date: October 4, 2011

*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

    display: block;

}

body {

    line-height: 1;

}

ol, ul {

    list-style: none;

}

blockquote, q {

    quotes: none;

}

blockquote:before, blockquote:after, q:before, q:after {

    content:'';

    content: none;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

body {

    margin: 0;

    padding: 0 50px 50px 50px;

    background: url("http://wordimpress.com/demos/jflowplus-v2/images/bg.png") repeat top left transparent;

    font-family: Arial, Helvetica, sans-serif;

}

a {

    color:#838c1c;

    text-decoration: none;

}

#container {

    background: #FFF;

    width: 940px;

    margin: 0 auto;

    -moz-box-shadow: 0 0 10px 5px #c3c3c3;

    -webkit-box-shadow:0 0 10px 5px #c3c3c3;

    box-shadow:0 0 10px 5px #c3c3c3;

}

/* header */

#header {

    overflow: hidden;

}

#logoWrap {

    background:url('http://wordimpress.com/demos/jflowplus-v2/images/demo-page/jflow-logo.png') no-repeat top left transparent;

    margin: 5px auto 10px;

    width: 310px;

    height: 100px;

    position: relative;

}

#logoWrap h1 {

    font:...

JavaScript

/* Copyright (c) 2010 WordImpressed.com jFlow Plus by Devin Walker

 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)

 * jFlow 2.0 (Plus)

 * Version: jFlow Plus

 * Requires: jQuery 1.2+

 */
(function ($) {
    $.fn.jFlow = function (options) {
        var opts = $.extend({}, $.fn.jFlow.defaults, options);
        var randNum = Math.floor(Math.random() * 11);
        var jFC = opts.controller;
        var jFS = opts.slideWrapper;
        var jSel = opts.selectedWrapper;
        var cur = 0;
        var timer;
        var maxi = $(jFC).length;
        //get width of individual slides
        var width = $(opts.slides).children().outerWidth();
        //get current number of slides
        var slidesNum = $(opts.slides).children().size();
        //get the total width
        var totalWidth = width * slidesNum;
        //last slide number
        var lastSlide = (slidesNum - 1);
        // additional container length for 'flow'
        var additionalSlide = slidesNum + 1;
        //defualt pause time between transitions
        var pause = opts.pause;
        // jFlow sliding function which handles the animations
        // current animations: 'rewind' and 'flow'
        var slide = function (dur, i) {
            //hide overflow for slides
            $(opts.slides).children().css({
                overflow: "hidden"
            });
            //handling iframes
            $(opts.slides + " iframe").hide().addClass("temp_hide");
            //depending of our effect we will do different animations			
            if (opts.effect == "rewind") {
                //this is our 'rewind' animation where the slide will rewind to first slide in stack
                $(opts.slides).animate({
                    marginLeft: "-" + (i * $(opts.slides).find(":first-child").width() + "px")
                }, opts.duration * (dur), opts.easing, function () {
                    $(opts.slides).children().css({
                        overflow:...