JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>
<div class="t">

</div>

CSS

.wrap{
  display:flex;
  position:relative;
  justify-content: center;
}
.card{
  height:120px;
  width:80px;
  background:blue;
  border:1px solid black;
  border-radius:5px;
  position:relative;
  top:30px;
  transition: transform .2s;
}
.card:nth-child(1) {
transform: translateY(0px) rotate(-42deg);
left: 87px;
top: 52px;
}
.card:nth-child(2) {
    transform: translateY(0px) rotate(-26deg);
    left: 42px;
    top: 38px;
}
.card:nth-child(3) {
    transform: translateY(0px) rotate(-16deg);
    left: 7px;
    top: 26px;
 }
.card:nth-child(4) {
    transform: translateY(0px) rotate(1deg);
    left: -24px;
    top: 24px;  
}
.card:nth-child(5) {
    right: 54px;
    top: 28px;
    transform: translateY(0px) rotate(16deg);
}
.card:nth-child(6) {
    transform: translateY(0px) rotate(26deg);
    right: 82px;
    top: 44px;
}
.card:nth-child(7) {
    transform: translateY(0px) rotate(35deg);
    right: 117px;
    top: 67px;
}

.card:nth-child(1):hover{
z-index:2;
  transform: translate(-20px) rotate(-42deg) ;
}

.card:nth-child(2):hover{
z-index:2;
  transform: translateY(-20px) rotate(-26deg) ;
}
.card:nth-child(3):hover{
z-index:2;
  transform: translate(1px , -20px) rotate(-16deg) ;
}

.card:nth-child(4):hover{
z-index:2;
  transform: translateY(-20px) rotate(1deg) ;
}
.card:nth-child(5):hover{
z-index:2;
  transform: translate(1px , -20px) rotate(16deg) ;
}

.card:nth-child(6):hover{
z-index:2;
  transform: translateY(-20px) rotate(26deg) ;
}
.card:nth-child(7):hover{
z-index:2;
  transform: translate(1px , -20px) rotate(35deg) ;
}