<div class="container">
  <div class="wrapper">
    <div class="card1"></div>
    <div class="card2"></div>
  </div>
</div>

<style>
  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .container {
    background: #ddd;
    border-radius: 12px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    position: relative;
    height: 160px;
    clip-path: inset(-50% 0% 0% -50%);
  }

  .wrapper {
    position: relative;
    display: flex;
    transform: translate(-4px, -12px);
  }

  .card1,
  .card2 {
    background: white;
    border-radius: 12px;
    box-shadow:
      0 0.9px 4px rgba(0, 0, 0, 0.12),
      0 2.1px 9.5px rgba(0, 0, 0, 0.12),
      inset 0 0 0 -1px rgba(0, 0, 0, 0.16);
    width: 200px;
    height: 200px;
  }

  .card1 {
    transform: rotate(-6deg) translateX(-12px);
  }

  .card2 {
    position: absolute;
  }
</style>