<div class="scd-fan">
  <div class="scd-fan__stage">
    <div class="scd-fan__leaf"><h3>Fern</h3><span>Pteridophyta</span></div>
    <div class="scd-fan__leaf"><h3>Sage</h3><span>Salvia</span></div>
    <div class="scd-fan__leaf"><h3>Ivy</h3><span>Hedera</span></div>
    <div class="scd-fan__leaf"><h3>Thyme</h3><span>Thymus</span></div>
    <div class="scd-fan__leaf"><h3>Moss</h3><span>Bryophyta</span></div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],500;9..144,600&family=Spectral:wght@400&display=swap');

.scd-fan, .scd-fan *, .scd-fan *::before, .scd-fan *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scd-fan {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,#f4ede1,#e6dcc6);
  font-family: 'Spectral', serif;
}
.scd-fan__stage {
  position: relative;
  width: 200px; height: 280px;
  transform: translateY(60px);
}
.scd-fan__leaf {
  position: absolute; inset: 0;
  border-radius: 14px 14px 60px 60px;
  background: linear-gradient(165deg,#1f4d3a,#2d6e4f);
  box-shadow: 0 16px 30px rgba(31,77,58,.35);
  transform-origin: 50% 110%;
  transition: transform .7s cubic-bezier(.34,1.4,.4,1);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px;
  color: #e9f3ec;
  border: 1px solid rgba(255,255,255,.15);
}
.scd-fan__leaf h3 { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 600; }
.scd-fan__leaf span { font-size: .8rem; opacity: .7; letter-spacing: .18em; text-transform: uppercase; }
.scd-fan__leaf:nth-child(odd) { background: linear-gradient(165deg,#7a3b2e,#a8543f); }
.scd-fan__leaf:nth-child(1) { transform: rotate(-40deg); }
.scd-fan__leaf:nth-child(2) { transform: rotate(-20deg); }
.scd-fan__leaf:nth-child(3) { transform: rotate(0deg); }
.scd-fan__leaf:nth-child(4) { transform: rotate(20deg); }
.scd-fan__leaf:nth-child(5) { transform: rotate(40deg); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(1) { transform: rotate(-72deg); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(2) { transform: rotate(-36deg); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(3) { transform: rotate(0deg) translateY(-12px); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(4) { transform: rotate(36deg); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(5) { transform: rotate(72deg); }

@media (prefers-reduced-motion: reduce) {
  .scd-fan__leaf { transition: none !important; }
}