JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mjmonline.se/test/js/slides.min.jquery.js"></script>
<div id="slides">
    <div class="slides_container">
        <div><img src="http://mjmonline.se/test/img/1.jpg" alt="placeholder image 1"></div>
        <div><img src="http://mjmonline.se/test/img/2.jpg" alt="placeholder image 2"></div>
        <div><img src="http://mjmonline.se/test/img/3.jpg" alt="placeholder image 3"></div>
        <div><img src="http://mjmonline.se/test/img/4.jpg" alt="placeholder image 4"></div>
        <div><div id="player">
            <iframe width="560" height="315" frameborder="0" src="http://www.youtube.com/embed/bpOR_HuHRNs?enablejsapi=1"></iframe>
            </div></div>
    </div>
</div>

CSS

// http://mjmonline.se/test/stylesheets/screen.css
/*------------------------------***** =RESET AND FUNCTIONS ***** ------------------------------*/ /* Welcome to Compass.  * In this file you should write your main styles. (or centralize your imports)  * Import this file using the following HTML or equivalent:  * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */ /* line 17, ../../../../Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ 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; }  /* line 20, ../../../../Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ body {   line-height: 1; }  /* line 22, ../../../../Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ ol, ul {   list-style: none; }  /* line 24, ../../../../Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ table {   border-collapse: collapse;   border-spacing: 0; }  /* line 26, ../../../../Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ caption, th, td {   text-align: left;   font-weight: normal;   vertical-align: middle; }  /* line 28,...

JavaScript

// jQuery included at the left panel
// Included at the left panel: http://mjmonline.se/test/js/slides.min.jquery.js

/*
 * @author       Rob W (http://stackoverflow.com/a/7513356/938089
 * @description  Executes function on a framed YouTube video (see previous link)
 *               For a full list of possible functions, see:
 *               http://code.google.com/apis/youtube/js_api_reference.html
 * @param String frame_id The id of (the div containing) the frame
 * @param String func     Desired function to call, eg. "playVideo"
 *        (Function)      Function to call when the player is ready.
 * @param Array  args     (optional) List of arguments to pass to function func*/
function callPlayer(frame_id, func, args) {
    if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
    var iframe = document.getElementById(frame_id);
    if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
        iframe = iframe.getElementsByTagName('iframe')[0];
    }
    // When the player is not ready yet, add them to a queue
    if (!callPlayer.queue) callPlayer.queue = {};
    var queue = callPlayer.queue[frame_id],
        domReady = document.readyState == 'complete';
    // queue has three states: Uninitialised, array and 0
    // Array = queue, 0 = ready
    if (domReady && !iframe && queue) {
        window.console && console.log('callPlayer: No suitable frame found for id=' + frame_id);
        return clearInterval(queue.poller);
    }
    if (func != 'listening' && (!domReady || iframe && (!iframe.contentWindow || !queue || !queue.ready))) {
        if (!queue) queue = callPlayer.queue[frame_id] = [];
        queue.push([func, args]);
        if (!('poller' in queue)) {
            queue.poller = setInterval(function() {callPlayer(frame_id, 'listening');}, 250);
            me(1, function runOnceReady(e) {
                clearInterval(queue.poller);
                var tmp = JSON.parse(e.data);
                if (tmp && tmp.id ==...