<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="passport-card">
  <div class="passport-avatar">
    AM
  </div>
  <div>
    <small>
      TRAVEL ID
    </small>
    <h3>
      Alex Morgan
    </h3>
    <p>
      Member since 2022
    </p>
  </div>
  <i class="passport-stamp">
    CLEARED
  </i>
</article>

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

.passport-card{position:relative;display:flex;align-items:center;gap:13px;width:254px;padding:19px;border:1px solid #cbbf9e;border-radius:10px;background:#f7f0dc;color:#31465d;font-family:Arial;overflow:hidden}.passport-avatar{display:grid;place-items:center;width:47px;height:57px;border-radius:7px;background:#aac8d1;color:#31536b;font-weight:800}.passport-card small{font-size:9px;font-weight:800;color:#ae8e64;letter-spacing:1px}.passport-card h3{margin:6px 0;font-size:17px}.passport-card p{margin:0;font-size:10px;color:#8090a0}.passport-stamp{position:absolute;right:12px;bottom:10px;padding:5px;border:2px solid #c9655b;border-radius:4px;color:#c9655b;font:800 10px Arial;font-style:normal;opacity:0;transform:rotate(-18deg) scale(1.8);transition:.35s}.passport-card:hover .passport-stamp{opacity:1;transform:rotate(-18deg) scale(1)}