<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="vinyl-card">
  <div class="vinyl-sleeve">
    <i>
    </i>
    <b>
      LIVE
      <br>
      SESSIONS
    </b>
  </div>
  <div>
    <small>
      PLAYLIST
    </small>
    <h3>
      Sunday soul
    </h3>
    <p>
      18 tracks · 1h 12m
    </p>
  </div>
</article>

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

.vinyl-card{display:flex;align-items:center;gap:15px;width:260px;padding:15px;border-radius:15px;background:#f4dfcb;color:#382a34;font-family:Arial;overflow:hidden}.vinyl-sleeve{position:relative;display:grid;place-items:center;width:75px;height:75px;flex:none;overflow:visible;background:#dd6d72;color:#fff;box-shadow:4px 5px 0 #9f4955}.vinyl-sleeve i{position:absolute;z-index:0;right:-19px;width:59px;height:59px;border-radius:50%;background:repeating-radial-gradient(#28272d 0 3px,#47444b 4px 5px);transition:transform .5s}.vinyl-sleeve b{position:relative;z-index:1;font:800 9px Arial;text-align:center;letter-spacing:1px}.vinyl-card small{font-size:9px;font-weight:800;letter-spacing:1px;color:#ba6870}.vinyl-card h3{margin:6px 0;font-size:19px}.vinyl-card p{margin:0;font-size:10px;color:#87727a}.vinyl-card:hover .vinyl-sleeve i{transform:translateX(14px) rotate(180deg)}