<!-- 

INSPIRED BY:

Clay: UI/UX Design Agency

https://dribbble.com/shots/14508322-Marqeta-Stacked-Cards

-->

<div class="card-container">

  <div class="card card1">
    <p class="card-number">1</p>
    <p class="card-details">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <div class="card card2">
    <p class="card-number">2</p>
    <p class="card-details">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>

  <div class="card card3">
    <p class="card-number">3</p>
    <p class="card-details">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
  </div>
</div>

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.card-container {
  height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card {
  display: grid;
  grid-template-columns: 50px 250px;
  justify-items: center;
  font-size: 25px;
  width: 350px;
  height: 175px;
  border-radius: 10px;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2);
  perspective: 400px;
  transform: rotateX(50deg) rotateZ(50deg);
  margin: -50px;
  transition: all 1s ease;
}

.card:hover {
  margin: 100px;
}

.card1:hover {
  margin: -75px;
}

.card1 {
  z-index: 3;
  background-color: #0dcb97;
}

.card2 {
  color: white;
  z-index: 2;
  background-color: #4d3f98;
}

.card3 {
  z-index: 1;
}