JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="accordion">
	<li id="c1"></li>
	<li id="c2"></li>
	<li id="c3"></li>
	<li id="c4"></li>
	<li id="c5"></li>
</ul>

CSS

#accordion{
	overflow:hidden;
	width:600px;
	border:1px solid #000;
	list-style:none;
	padding:0;
}
#accordion li{
	float:left;
    margin:4px;
	width:100px;
	height:100px;
}
#c1{background-color:#53B388}
#c2{background-color:#5A69A9}
#c3{background-color:#C26468}
#c4{background-color:#BF7CC7}
#c5{background-color:#f00}

JavaScript

var acc = function(o){
    
    function animation($run){
        if(!animation.timeout) {
            animation.timeout=setInterval(function(){animation(true)},o.sec);
            $run=true;
        }
        x=false;
        if(!$run) return;
         for(var i=0;i<o.blocks.length;i++){
            var y=o.blocks[i];
            if(y._width!=y._to){
                if(y._width!=y._to)
                    y._width=Math[y._width<y._to?'min':'max'](y._to,y._width-y._step);
                y.style.width = y._width + 'px';
                x=true;
            }
         }
        if(!x) {
            clearInterval(animation.timeout);
            animation.timeout=false;
        }
    }
    
	//recalculate steps
    function animate($run){
        for(var i=0;i<o.blocks.length;i++){
            var y=o.blocks[i];
            if(y._width!=y._to){
                y._step=(y._width-y._to)/(o.time/o.sec);
            }
        }
        animation();
    }
    
    //prepare blocks
    var wrap=document.getElementById(o.id);
	o.blocks=wrap.children;
    o.totalWidth=0;
    for(var i=0;i<o.blocks.length;i++){
        o.blocks[i]._width=o.blocks[i].offsetWidth;
        o.totalWidth+=o.blocks[i]._width;
    }	
	wrap.onmouseover=function(e){
		e=e||window.event;
		var x=o.totalWidth,$this = e.target||e.srcElement;
        if(!$this._width) return;
        for(var i=0;i<o.blocks.length;i++){
            o.blocks[i]._to=o.min;
            x-=o.min;
        }
        $this._to=x+o.min;
        animate();
    }
    wrap.onmouseout=function(e){
        var x=Math.round(o.totalWidth/o.blocks.length);
		for(var i=0;i<o.blocks.length;i++){
            o.blocks[i]._to=x;
        }
        animate();
    }
};

acc({id:'accordion',min:30,time:1000,sec:50});