JSFiddle - React, Tailwind, and code Playground

HTML

<!--script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script-->    
<script src="http://www.musca.se/full-window-width-jquery-tools-content-slider-demo/assets/scripts/jquery.easing.min.js"></script>
<!--script src="https://raw.github.com/jquerytools/jquerytools/master/src/scrollable/scrollable.js"></script-->
   
    <h1>Simplified full window width content slider demo.</h1>
    
    <div id="slider">
        <div style="left: -1903px;" id="items">
            <!-- slide 1 -->
            <div style="width: 1903px;">
               <div class="content">
                       <p>
                        Look at the source code to get more info.
                        Read more about scrollable settings at the. <a href="http://jquerytools.org/documentation/scrollable/index.html" target="_blank">scrollable web page</a>
                    </p>
               </div>
            </div>
            
            <!-- slide 2 -->
            <div style="width: 1903px;">
                  <div class="content">
                    <p>Some more content in slide 2</p>
                </div>
            </div>
            
            <!-- slide 3 -->
            <div style="width: 1903px;">
                  <div class="content">
                    <p>And even more content in slide 3</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Slider Navigation -->
    <div id="navigation-wrapper">
        <span class="prev">&lt; Previous slide</span>
        <ul id="navigation">
            <li class="active">slide 1</li>
            <li>slide 2</li>
            <li>slide 3</li>
        </ul>
        <span class="next">Next slide &gt;</span>
    </div>

CSS

/* slider styles */    
        #slider{
            width: 960px;
            height: 360px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        .JS #slider{
            width: 100%;
            min-width: 960px;
            margin:0;
        }
        #items{
            width: 2000em;
            position: absolute;
            /* hardware acceleration */
            -moz-transform:rotateX( 0deg );
            -webkit-transform:rotateX( 0deg );
        }
        #items > div{
            float: left;
        }
        #items > div > div{
            width: 960px;
            height: 360px;
            margin: 0 auto;
            overflow: hidden;
            background-color: #333;
        }

        /* navigation code */
        #navigation-wrapper{
            display: none;
        }
        .JS #navigation-wrapper{
            display: block;
            width: 960px;
            margin: 20px auto;
            text-align: center;
        }
        ul#navigation{
            width: 330px;
            margin: 0 auto;
        }
        ul#navigation li{
            width: 100px;
        }
        ul#navigation li, .prev, .next{
            padding: 5px;
            display: block;
            color: blue;
        }
        ul#navigation li, .prev{
            float: left;
        }
        .next{
            float: right;
        }
        #navigation-wrapper span:hover, ul#navigation li:hover{
            cursor: pointer;
            color: red;
        }
         ul#navigation li.active, ul#navigation li.active:hover{
            background-color: #ccc;
            color: blue;
            cursor: default;
        }

JavaScript

/**
 * @license 
 * jQuery Tools @VERSION Scrollable - New wave UI design
 * 
 * NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE.
 * 
 * http://flowplayer.org/tools/scrollable.html
 *
 * Since: March 2008
 * Date: @DATE 
 */
(function($) { 

    // static constructs
    $.tools = $.tools || {version: '@VERSION'};
    
    $.tools.scrollable = {
        
        conf: {    
            activeClass: 'active',
            circular: false,
            clonedClass: 'cloned',
            disabledClass: 'disabled',
            easing: 'swing',
            initialIndex: 0,
            item: '> *',
            items: '.items',
            keyboard: true,
            mousewheel: false,
            next: '.next',   
            prev: '.prev', 
            size: 1,
            speed: 400,
            vertical: false,
            touch: true,
            wheelSpeed: 0
        } 
    };
                    
    // get hidden element's width or height even though it's hidden
    function dim(el, key) {
        var v = parseInt(el.css(key), 10);
        if (v) { return v; }
        var s = el[0].currentStyle; 
        return s && s.width && parseInt(s.width, 10);    
    }

    function find(root, query) { 
        var el = $(query);
        return el.length < 2 ? el : root.parent().find(query);
    }
    
    var current;        
    
    // constructor
    function Scrollable(root, conf) {   
        
        // current instance
        var self = this, 
             fire = root.add(self),
             itemWrap = root.children(),
             index = 0,
             vertical = conf.vertical;
                
        if (!current) { current = self; } 
        if (itemWrap.length > 1) { itemWrap = $(conf.items, root); }
        
        
        // in this version circular not supported when size > 1
        if (conf.size > 1) { conf.circular = false; } 
        
        // methods
        $.extend(self, {
                
            getConf: function() {
                return...