JSFiddle - React, Tailwind, and code Playground

by seefeld

HTML

<script src="https://raw.github.com/codrops/Elastislide/master/js/jquery.elastislide.js"></script>
<div class="more-elements">	<a href="#" class="buttons prev disable">left</a>

    <div class="viewport">
        <ul class="overview" style="width: 810px; left: 0px;">
            <li class="icon-invoice first-child"><span class="element-id grey-border-dotted">08L278656</span>
	<span class="element-amount grey-border-dotted">£ 3,567.99</span> 
                <a
                class="element-btn grey-btn" href="#">Pay Now</a>
            </li>
            <li class="icon-invoice"><span class="element-id grey-border-dotted">08L278656</span>
	<span class="element-amount grey-border-dotted">£ 3,567.99</span> 
                <a
                class="element-btn grey-btn" href="#">Pay Now</a>
            </li>
            <li class="icon-invoice"><span class="element-id grey-border-dotted">08L278656</span>
	<span class="element-amount grey-border-dotted">£ 3,567.99</span> 
                <a
                class="element-btn grey-btn" href="#">Pay Now</a>
            </li>
            <li class="icon-invoice"><span class="element-id grey-border-dotted">08L278656</span>
	<span class="element-amount grey-border-dotted">£ 3,567.99</span> 
                <a
                class="element-btn grey-btn" href="#">Pay Now</a>
            </li>
            <li class="icon-invoice"><span class="element-id grey-border-dotted">08L278656</span>
	<span class="element-amount grey-border-dotted">£ 3,567.99</span> 
                <a
                class="element-btn grey-btn" href="#">Pay Now</a>
            </li>
            <li class="icon-invoice last-child"><span class="element-id grey-border-dotted">08L278656</span>
	<span class="element-amount grey-border-dotted">£ 3,567.99</span> 
                <a
                class="element-btn grey-btn" href="#">Pay Now</a>
            </li>
            <li class="icon-invoice last-child"><span class="element-id...

CSS

body {
    padding: 50px;
}
* {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.more-elements {
    height: 100px;
    overflow:hidden;
}
.more-elements .viewport {
    float: left;
    width: 460px;
    height: 100px;
    overflow: hidden;
    position: relative;
}
.more-elements .buttons {
    display: block;
    margin: 30px 10px 0 0;
    float: left;
}
.more-elements .next {
    margin: 30px 0 0 10px;
}
.more-elements .disable {
    visibility: hidden;
}
.more-elements .overview {
    list-style: none;
    position: absolute;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
}
.more-elements .overview li {
    float: left;
    margin: 0 0 0 0;
    padding: 0px;
    height: 100px;
    width: 115px;
}

JavaScript

(function (a) {
    a.tiny = a.tiny || {};
    a.tiny.carousel = {
        options: {
            start: 1,
            display: 1,
            axis: "x",
            controls: true,
            pager: false,
            interval: false,
            intervaltime: 3000,
            rewind: false,
            animation: true,
            duration: 1000,
            callback: null
        }
    };
    a.fn.tinycarousel_start = function () {
        a(this).data("tcl").start()
    };
    a.fn.tinycarousel_stop = function () {
        a(this).data("tcl").stop()
    };
    a.fn.tinycarousel_move = function (c) {
        a(this).data("tcl").move(c - 1, true)
    };

    function b(q, e) {
        var i = this,
            h = a(".viewport:first", q),
            g = a(".overview:first", q),
            k = g.children(),
            f = a(".next:first", q),
            d = a(".prev:first", q),
            l = a(".pager:first", q),
            w = 0,
            u = 0,
            p = 0,
            j = undefined,
            o = false,
            n = true,
            s = e.axis === "x";

        function m() {
            if (e.controls) {
                d.toggleClass("disable", p <= 0);
                f.toggleClass("disable", !(p + 1 < u))
            }
            if (e.pager) {
                var x = a(".pagenum", l);
                x.removeClass("active");
                a(x[p]).addClass("active")
            }
        }
        function v(x) {
            if (a(this).hasClass("pagenum")) {
                i.move(parseInt(this.rel, 10), true)
            }
            return false
        }
        function t() {
            if (e.interval && !o) {
                clearTimeout(j);
                j = setTimeout(function () {
                    p = p + 1 === u ? -1 : p;
                    n = p + 1 === u ? false : p === 0 ? true : n;
                    i.move(n ? 1 : -1)
                }, e.intervaltime)
            }
        }
        function r() {
      ...