JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fliptable">
                        <div class="holder">
                        <ul class="headliner" style="left: 0;">
                            <li class="headitem" style="opacity: 1;">
                                <div class="squared">
                                    Content
                                </div>
                            </li>
                            <li class="headitem" style="opacity: 0;">
                                <div class="squared">
                                    Content
                                </div>
                            </li>
                            <li class="headitem" style="opacity: 0;">
                                <div class="squared">
                                    Content
                                </div>
                            </li>
                            <li class="headitem" style="opacity: 0;">
                                <div class="squared">
                                    Content
                                </div>
                            </li>
                        </ul>
                        </div>
                    </div>

CSS

#fliptable {
    height: 380px;
    width: 100%;
    margin: 20px 0 180px;
    overflow: hidden;
}
#fliptable .headliner,
#fliptable .heatitem {
    list-style: none;
}
#fliptable .holder {
    width: 940px;
    margin: 0 auto;
    overflow: visible;
    display: block;
    position: relative;
}
#fliptable .headliner {
    position: relative;
    height: 380px;
    width: 100000px;
}
#fliptable .headitem {
    float: left;
    margin-right: 40px;
}
#fliptable .squared {
    background: #4bd3c3;
    height: 360px;
    width: 920px;
    padding: 10px;
    border-radius: 20px;
    display: block;
}

JavaScript

var FlipTable = new Class({

    Implements: [Options],

    options: {
        timer: 5000,
        width: 980
    },

    initialize: function(liner, elements, options){
        this.setOptions(options);
        this.current = 0;
        this.liner = liner;
        this.element = elements;
        this.ammount = $$(this.element).length;
        this.max = this.ammount-1;
        this.play();
    },

    play: function(){
        var rollingon;
        var begin = function(){
            rollingon = function(){
                    this.next(); 
            }.bind(this).periodical(this.options.timer);
        }.bind(this);
        
        begin();
        
        $$('.holder').addEvents({
            mouseenter: function(){
                clearInterval(rollingon);
            },
            mouseleave: begin
        });
    },

    goTo: function(place){
        if (place == this.current){
            return true;
        };
        
        var goingTo = -place * this.options.width;
        
        $$(this.liner).set('tween', {
            property: 'left',
            duration: 1000,
            link: 'chain'
        });
        
        $$(this.liner).tween(goingTo);
        
        var nextstep = place + 1;
        $$(this.element+':nth-child('+nextstep+')').set('tween', {
            property: 'opacity',
            link: 'ignore'
        }).tween(1);
        $$(this.element+':nth-child('+(this.current+1)+')').set('tween', {
            property: 'opacity',
            link: 'ignore'
        }).tween(0);
        this.current = place;
    },

    next: function(){
        var next = this.current + 1;
        if (next > this.max){
            next = 0;
        };
        this.goTo(next);
    }
});

window.addEvent('domready', function(){
    var homeFlip = new FlipTable('.headliner', '.headitem');
});