JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="accordion">
	<li id="c1" style="width:100px;"></li>
	<li id="c2" style="width:100px;"></li>
	<li id="c3" style="width:100px;"></li>
	<li id="c4" style="width:100px;"></li>
	<li id="c5" style="width:100px;"></li>
</ul>

CSS

#accordion{
	overflow:hidden;
	width:500px;
	border:1px solid #000;
	list-style:none;
	padding:0;
}
#accordion li{
	float:left;
	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 animate($run){
        if(!animate.timeout) {
            animate.timeout=setInterval(function(){animate(true)},o.sec);
            $run=true;
        }
        if(!$run) return;
        var x=false,toAdd=0;
        for(var i=0;i<o.blocks.length;i++){
            var width=parseInt(o.blocks[i].style.width);
            if(o.blocks[i]._state=='min' && width>o.min){
                var newWidth = Math.max(o.min,width-o.step);
                toAdd+=width-newWidth;
                o.blocks[i].style.width = newWidth + 'px';
                x=true;
            } else if(o.blocks[i]._state=='rest' && width>o.size){
                var newWidth = Math.max(o.size,width-o.step);
                toAdd+=width-newWidth;
                o.blocks[i].style.width = newWidth + 'px';
                x=true;
            } else if(o.blocks[i]._state=='rest' && width<o.size){
                var newWidth=width+toAdd; toAdd=0;
                o.active=o.blocks[i];
                o.blocks[i].style.width = newWidth + 'px';
                x=true;
            }
        }
        if(toAdd>0){ // for max or rest of rest
            var width=parseInt(o.active.style.width);
            o.active.style.width = (width+toAdd) + 'px';
        }
        if(!x) {
            clearInterval(animate.timeout);
            animate.timeout=false;
        }
    }
    
	var wrap = document.getElementById(o.id); //контейнер блоков
    o.blocks=wrap.children;
    for(var i=0;i<o.blocks.length;i++){
        o.blocks[i]._state='min';
    }	
	wrap.onmouseover=function(e){
		
		e=e||window.event;
		var $this = e.target||e.srcElement; //получаем блок на который навели стрелку
		
		if(!$this._state || $this._state=='max') return;
        for(var i=0;i<o.blocks.length;i++){
            o.blocks[i]._state='min';
        }
        o.active=$this;
        animate();
    }
    wrap.onmouseout=function(e){
		for(var i=0;i<o.blocks.length;i++){
           ...