JSFiddle - React, Tailwind, and code Playground

by João Vitor Scheuermann

HTML

<div id="banner">
  
  <div id="contentWrapper">
    <div class=""></div>
    <div class="wrapper">
      <div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
    </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#banner {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	border: solid 1px #000;
	background-color: #FFF;
	width: 970px;
	height: 250px;
	/* cursor: pointer; */
}

#contentWrapper {
  position: absolute;  
  width: 2000px;
  height: 100%;
  right: 0;
  text-align: right;
}

.wrapper {
  position: relative;
  display: inline-block;
  white-space: no-wrap;
  height: 100%;
}

.wrapper:hover >:not(:hover) {
  background: green;
}

.item {
  position: relative;
  display: inline-block;
  width: 175px;
  height: 100%;
  background: red;
    
  border-left: 1px solid #ffffff;

  transition: all .2s ease-in-out; 
}

.item:hover {
  width: 500px;
}

JavaScript

function Amadre_Animation(){var t=0,e=[],n=this;this.animationElements=function(l,a,i){function r(t,e){if("LOOPING"==e)n.clearAnimation(".all");else for(var l=e.split(" "),a=0;a<l.length;a++)t.classList.add(l[a]);"STOP_HERE"!=e&&"LOOPING"!=e||!i||i()}for(var s=0;s<a.length;s++)for(var o=document.querySelectorAll(a[s][0]),c=0;c<o.length;c++)t+=1e3*a[s][1],o[c].st=o[c].st||[],o[c].st.push(setTimeout(r.bind(null,o[c],l),t)),o[c].cl=o[c].className.split(" ")[0],e.push(o[c])},this.clearAnimation=function(n){t=0;for(var l=0;l<e.length;l++)if(n==e[l]||".all"==n){e[l].className=e[l].cl;for(var a=0;a<e[l].st.length;a++)clearTimeout(e[l].st[a])}}}var el=function(t){return document.querySelector(t)};


/* let a = {
  el: document.querySelector('#batata'),
  over: false,
  paused: true
}

a.el.addEventListener('mouseover', e => {
  a.over = true
})

a.el.addEventListener('mouseout', e => {
  a.over = false
})

a.el.addEventListener('transitionend', e => {
  if (a.over) a.paused = false 
  else a.paused = true
}) */