JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <title>AnythingSlider Simple Demo</title>
    <link rel="shortcut icon" href="demos/images/favicon.ico">
    <link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">

    <!-- jQuery (required) -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

    <!-- Anything Slider -->
    <link rel="stylesheet" href="css/anythingslider.css">
    <script src="js/jquery.anythingslider.js"></script>

    <!-- Define slider dimensions here -->
    <style>
    #slider { width: 617px; height: 315px; }
    </style>

    <!-- AnythingSlider initialization -->
    <script>
        // DOM Ready
        $(function(){
            $('#slider').anythingSlider();
        });
    </script>

    <!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet -->
    <!--[if lte IE 7]>
    <link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
    <![endif]-->
</head>

<body id="simple">

    <!-- Simple AnythingSlider -->

    <ul id="slider">

        <li><img src="http://css-tricks.com/examples/AnythingSlider/images/slide-env-1.jpg" alt=""></li>

        <li><img src="http://css-tricks.com/examples/AnythingSlider/images/slide-env-1.jpg" alt=""></li>

        <li><img src="http://css-tricks.com/examples/AnythingSlider/images/slide-env-1.jpg" alt=""></li>

        <li><img src="http://css-tricks.com/examples/AnythingSlider/images/slide-env-1.jpg" alt=""></li>

    </ul>

    <!-- END AnythingSlider -->

</body>

</html>

CSS

/*
    AnythingSlider v1.7+ Default (base) theme
    By Chris Coyier: http://css-tricks.com
    with major improvements by Doug Neiner: http://pixelgraphics.us/
    based on work by Remy Sharp: http://jqueryfordesigners.com/
*/

/*****************************
  SET DEFAULT DIMENSIONS HERE
 *****************************/
/* change the ID to match your slider */
#slider {
    width: 617px;
    height: 390px;
    list-style: none;
    /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
    overflow-y: auto;
    overflow-x: hidden;
}

/*****************
  SET COLORS HERE
 *****************/
/**** Default state (no keyboard focus) ****/
/* slider window - top & bottom borders, default state */
.activePage {
                -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    
}
.anythingWindow {
                -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    
}


div.anythingSlider .anythingWindow {

    
}
/* Navigation buttons, default state */
div.anythingSlider .anythingControls ul a.cur, div.anythingSlider .anythingControls ul a {
    background: #777;
    color: #000;
    
}
/* start-stop button, stopped, default state */
div.anythingSlider .start-stop {
    background-color: #040;
    color: #fff;
}
/* start-stop button, playing, default state */
div.anythingSlider .start-stop.playing {
    background-color: #800;
}
/* start-stop button, default hovered text color (when visible) */
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
    color: #ddd;
}

/**** Active State (slider has keyboard focus) ****/
/* slider window - top & bottom borders, active state */
div.anythingSlider.activeSlider .anythingWindow {
    border-color: #7C9127;
}
/* Navigation buttons, active state */
div.anythingSlider.activeSlider .anythingControls ul a.cur, div.anythingSlider.activeSlider .anythingControls ul a {
    background-color: #7C9127;
}
/*...

JavaScript

/*
    AnythingSlider v1.7.24
    Original by Chris Coyier: http://css-tricks.com
    Get the latest version: https://github.com/ProLoser/AnythingSlider

    To use the navigationFormatter function, you must have a function that
    accepts two paramaters, and returns a string of HTML text.

    index = integer index (1 based);
    panel = jQuery wrapped LI item this tab references
    @return = Must return a string of HTML/Text

    navigationFormatter: function(index, panel){
        return "Panel #" + index; // This would have each tab with the text 'Panel #X' where X = index
    }
*/

(function($) {

    $.anythingSlider = function(el, options) {

        var base = this, o;

        // Wraps the ul in the necessary divs and then gives Access to jQuery element
        base.el = el;
        base.$el = $(el).addClass('anythingBase').wrap('<div class="anythingSlider"><div class="anythingWindow" /></div>');

        // Add a reverse reference to the DOM object
        base.$el.data("AnythingSlider", base);

        base.init = function(){

            // Added "o" to be used in the code instead of "base.options" which doesn't get modifed by the compiler - reduces size by ~1k
            base.options = o = $.extend({}, $.anythingSlider.defaults, options);

            base.initialized = false;
            if ($.isFunction(o.onBeforeInitialize)) { base.$el.bind('before_initialize', o.onBeforeInitialize); }
            base.$el.trigger('before_initialize', base);

            // Cache existing DOM elements for later
            // base.$el = original ul
            // for wrap - get parent() then closest in case the ul has "anythingSlider" class
            base.$wrapper = base.$el.parent().closest('div.anythingSlider').addClass('anythingSlider-' + o.theme);
            base.$window = base.$el.closest('div.anythingWindow');
            base.win = window;
            base.$win = $(base.win);

            base.$controls = $('<div...