JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<div class="box" draggable=true>
  tedst
</div>
<div class="box" draggable=true>
  test
</div>
<div class="box" draggable>
  test
</div>
<div class="box" draggable>
  test
</div>
<div class="box" draggable>
  test
</div>
<div class="box" draggable>
  test
</div>
<div class="box" draggable>
  test
</div>

CSS

.box {
  border: 1px solid black;
  width: 100px;
  height: 30px;
  margin-bottom: -15px;
  background-color: #fff;
  transition: all 0.2s;
 /** transform: perspective( 100px) rotatex( -45deg); */
  z-index: -1;
}

.box:hover,
.box:hover~div:first-of-type {
  z-index: 10;
  margin-bottom: 0px;
  transform: perspective( 100px) translateZ(1px);
}