JSFiddle - React, Tailwind, and code Playground

HTML

<div id="accordion">	
<a id="c1"></a>
	<a id="c2"></a>
	<a id="c3"></a>
	<a id="c4"></a>
	<a id="c5"></a>
</div>

CSS

#accordion{
	overflow:hidden;
	
	border:1px solid #000;
	padding:0;
}
#accordion a{
	float:left;
	width:100px;
	height:100px;
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: ease;
    
    -webkit-transition-property: width;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease;
    
    -moz-transition-property: width;
    -moz-transition-duration: 2s;
    -moz-transition-timing-function: ease;
    
    -o-transition-property: width;
    -o-transition-duration: 2s;
    -o-transition-timing-function: ease;
}
#accordion a:hover{
    width: 300px;
}
#c1{background-color:#53B388}
#c2{background-color:#5A69A9}
#c3{background-color:#C26468}
#c4{background-color:#BF7CC7}
#c5{background-color:#f00}