<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="wristband-card">
  <div class="wrist-code">
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
    <b>
    </b>
  </div>
  <small>
    WEEKEND PASS
  </small>
  <h3>
    Sunset Fields
  </h3>
  <p>
    Gate B · 19 Sep
    <span>
      ✓
    </span>
  </p>
</article>

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

.wristband-card{width:252px;padding:16px;border-radius:14px;background:#ef7a8a;color:#351d3d;font-family:Arial;overflow:hidden;box-shadow:0 8px 16px #a3436640}.wrist-code{position:relative;display:flex;gap:4px;height:42px;margin-bottom:13px;padding:7px;background:#43265a;overflow:hidden}.wrist-code i{width:7px;height:100%;background:#f5d56d}.wrist-code i:nth-child(even){width:3px}.wrist-code b{position:absolute;top:0;bottom:0;left:-20px;width:18px;background:#fff9;transform:skewX(-20deg);animation:wrist-scan 2s ease-in-out infinite}.wristband-card small{font-size:9px;font-weight:800;letter-spacing:1px;color:#ffe1a3}.wristband-card h3{margin:6px 0;font-size:20px}.wristband-card p{margin:0;font-size:10px;color:#ffe4e7}.wristband-card p span{float:right;color:#ffe36e;font-size:17px}@keyframes wrist-scan{50%{left:280px}}