JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
</div>

CSS

.main{
  width:300px;
}

div>div{
  width:300px;
  height:100px;
  background-color:red;
  margin:10px 0px;
  transition:0.3s;
}

.main div:nth-child(1){
  margin-left:50px;
}

.main:hover div:nth-child(1){
  margin-left:0px;
}

.main div:hover{
  margin-left:50px !important;
}
}