<div class="scd-accs">
  <div class="scd-accs__stage">
    <div class="scd-accs__panel scd-accs__panel--p1"><div class="scd-accs__label"><h3>Ember</h3><p>Warm tones &amp; energy</p></div></div>
    <div class="scd-accs__panel scd-accs__panel--p2"><div class="scd-accs__label"><h3>Violet</h3><p>Mystery &amp; depth</p></div></div>
    <div class="scd-accs__panel scd-accs__panel--p3"><div class="scd-accs__label"><h3>Azure</h3><p>Calm &amp; clarity</p></div></div>
    <div class="scd-accs__panel scd-accs__panel--p4"><div class="scd-accs__label"><h3>Jade</h3><p>Growth &amp; balance</p></div></div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600&family=Manrope:wght@400;600&display=swap');

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

.scd-accs {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #14101a;
  font-family: 'Manrope', sans-serif;
}
.scd-accs__stage {
  display: flex; gap: 10px; height: 300px;
}
.scd-accs__panel {
  position: relative;
  width: 64px;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: width .55s cubic-bezier(.3,.9,.3,1);
  display: flex; align-items: flex-end;
}
.scd-accs__panel:hover { width: 240px; }
.scd-accs__label { position: absolute; bottom: 24px; left: 24px; color: #fff; }
.scd-accs__label h3 { font-family: 'Unbounded', sans-serif; font-size: 1.3rem; white-space: nowrap; }
.scd-accs__label p { opacity: 0; font-size: .85rem; transition: opacity .4s .2s; white-space: nowrap; }
.scd-accs__panel:hover .scd-accs__label p { opacity: .8; }
.scd-accs__panel--p1 { background: linear-gradient(160deg,#ff9a3c,#ff5e62); }
.scd-accs__panel--p2 { background: linear-gradient(160deg,#c471f5,#7f53ac); }
.scd-accs__panel--p3 { background: linear-gradient(160deg,#00d2ff,#3a7bd5); }
.scd-accs__panel--p4 { background: linear-gradient(160deg,#11998e,#38ef7d); }

@media (prefers-reduced-motion: reduce) {
  .scd-accs__panel, .scd-accs__label p { transition: none !important; }
}