<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="sound-capsule-card">
  <div class="sound-top">
    <span class="sound-disc">
      ▶
    </span>
    <span>
      <small>
        NOW PLAYING
      </small>
      <h3>
        Night Drive
      </h3>
    </span>
    <i>
      ♡
    </i>
  </div>
  <div class="sound-wave">
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
  </div>
  <p>
    <span>
      1:24
    </span>
    <b>
    </b>
    <span>
      3:18
    </span>
  </p>
</article>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.sound-capsule-card{width:255px;padding:17px;border-radius:17px;background:#1d2030;color:#fff;font-family:Arial,sans-serif;box-shadow:0 12px 22px #1917283d}.sound-top{display:flex;align-items:center;gap:11px}.sound-disc{display:grid;place-items:center;width:42px;height:42px;border:2px solid #b19aff;border-radius:50%;color:#b19aff;font-size:15px;box-shadow:0 0 12px #a384ff66}.sound-top small{font-size:8px;letter-spacing:1.2px;color:#a7abc3}.sound-top h3{margin:4px 0 0;font-size:16px}.sound-top>i{margin-left:auto;color:#ff8fb9;font-style:normal}.sound-wave{display:flex;align-items:center;justify-content:center;gap:4px;height:47px;margin-top:11px}.sound-wave i{width:4px;height:14px;border-radius:5px;background:#77ead8;animation:sound-wave .65s ease-in-out infinite}.sound-wave i:nth-child(2){height:30px;animation-delay:.12s}.sound-wave i:nth-child(3){height:22px;animation-delay:.24s}.sound-wave i:nth-child(4){height:37px;animation-delay:.36s}.sound-wave i:nth-child(5){height:26px;animation-delay:.18s}.sound-wave i:nth-child(6){height:34px;animation-delay:.3s}.sound-wave i:nth-child(7){height:18px;animation-delay:.42s}.sound-wave i:nth-child(8){height:27px;animation-delay:.1s}.sound-capsule-card p{display:flex;align-items:center;gap:7px;margin:6px 0 0;color:#9ca1b9;font-size:9px}.sound-capsule-card p b{flex:1;height:3px;border-radius:5px;background:linear-gradient(90deg,#a789ff 43%,#454a62 43%)}@keyframes sound-wave{50%{transform:scaleY(.4)}}