JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box1">
  <div class="box2"></div>
</div>

CSS

.box1 {
  width: 150px;
  height: 60px;
  background: #333;
  margin:100px
}

.box2 {
  width: 50px;
  height: 150px;
  background:  linear-gradient(to top, red,blue);
  transform: translate(50px,-50px); 
  transition: transform 0.3s ease-in-out;
}

.box1:hover .box2{
      transform: translate(50px,-80px);
}