QR Share Card

<div class="nuda-shr-qr">
  <div class="nuda-shr-qr__head">
    <span class="nuda-shr-qr__title">Scan to share</span>
    <span class="nuda-shr-qr__badge">QR</span>
  </div>
  <div class="nuda-shr-qr__canvas">
    <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
      <rect width="80" height="80" fill="#0a0a0a" rx="6"/>
      <rect x="8" y="8" width="24" height="24" rx="2" fill="none" stroke="#e4ff54" stroke-width="2"/>
      <rect x="12" y="12" width="16" height="16" rx="1" fill="#e4ff54"/>
      <rect x="48" y="8" width="24" height="24" rx="2" fill="none" stroke="#e4ff54" stroke-width="2"/>
      <rect x="52" y="12" width="16" height="16" rx="1" fill="#e4ff54"/>
      <rect x="8" y="48" width="24" height="24" rx="2" fill="none" stroke="#e4ff54" stroke-width="2"/>
      <rect x="12" y="52" width="16" height="16" rx="1" fill="#e4ff54"/>
      <rect x="40" y="40" width="4" height="4" fill="#e4ff54"/>
      <rect x="48" y="40" width="4" height="4" fill="#e4ff54"/>
      <rect x="56" y="40" width="4" height="4" fill="#e4ff54"/>
      <rect x="64" y="40" width="4" height="4" fill="#e4ff54"/>
      <rect x="40" y="48" width="4" height="4" fill="#e4ff54"/>
      <rect x="56" y="48" width="4" height="4" fill="#e4ff54"/>
      <rect x="40" y="56" width="4" height="4" fill="#e4ff54"/>
      <rect x="48" y="56" width="4" height="4" fill="#e4ff54"/>
      <rect x="64" y="56" width="4" height="4" fill="#e4ff54"/>
      <rect x="40" y="64" width="4" height="4" fill="#e4ff54"/>
      <rect x="56" y="64" width="4" height="4" fill="#e4ff54"/>
      <rect x="64" y="64" width="4" height="4" fill="#e4ff54"/>
    </svg>
  </div>
  <p class="nuda-shr-qr__url">nudaui.com/components</p>
</div>

.nuda-shr-qr {
  background: #141414;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: .9rem;
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}

.nuda-shr-qr__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nuda-shr-qr__title {
  color: #777;
  font-size: .7rem;
  font-weight: 500;
}

.nuda-shr-qr__badge {
  background: #e4ff54;
  color: #0a0a0a;
  font-size: .6rem;
  font-weight: 800;
  padding: .1rem .35rem;
  border-radius: 4px;
  letter-spacing: .04em;
}

.nuda-shr-qr__canvas {
  background: #0a0a0a;
  border-radius: 8px;
  padding: .4rem;
  border: 1px solid rgba(228,255,84,.15);
}

.nuda-shr-qr__url {
  color: #777;
  font-size: .65rem;
  margin: 0;
  text-align: center;
  font-family: monospace;
}