JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="cards">
    <div class="card">
    </div>
    <div class="card">
    </div>
    <div class="card">
    </div>
    <div class="card">
    </div>
  </div>
</div>

CSS

body {
  background-color: #152544;
  padding:100px;
}

.wrapper{  
  border-radius: 20px;
  background-color: #F9FAFC;
  padding: 50px;
  width:887px;
}

.card {
  background-color: white;
  width: 200px;
  height: 300px;
  border-radius: 20px;
  margin-right: -170px;
  transition: all .2s;
  box-shadow: 10px 10px 25px rgba(0,0,0,.2); /* alpha instead of grey */
  border:1px solid rgb(240,240,240);
}

.card:nth-child(1) {
  transform: scale(0.7);
  margin-right:0;
}
.card:nth-child(2) {
  transform: scale(0.8);
}
.card:nth-child(3) {
  transform: scale(0.9);
}
.card:nth-child(4) {
  transform: scale(1);
}

.cards {
  display: flex;
  flex-direction: row-reverse; /*little trick so I don't need to change z-index */
}

.wrapper:hover .card {
  transform: scale(.5) translateY(200px);
  margin-right: 20px;
  box-shadow: 7px 7px 13px rgba(0,0,0,.2);
}