<div class="gm-tint-bg">
  <div class="gm-tint gm-tint--violet">
    <span class="gm-tint__dot"></span>
    <div><b>Components</b><small>13 collections</small></div>
  </div>
  <div class="gm-tint gm-tint--rose">
    <span class="gm-tint__dot"></span>
    <div><b>Motion</b><small>4 collections</small></div>
  </div>
  <div class="gm-tint gm-tint--cyan">
    <span class="gm-tint__dot"></span>
    <div><b>Tools</b><small>11 utilities</small></div>
  </div>
</div>

.gm-tint-bg {
  position: relative; padding: 22px;
  border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  background:
    radial-gradient(circle at 50% 50%, #e2e8f0 0%, transparent 60%),
    linear-gradient(135deg, #475569, #1e293b);
}
.gm-tint {
  display: flex; align-items: center; gap: 12px;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
  color: #fff;
}
.gm-tint b     { display: block; font: 700 12px system-ui, sans-serif; }
.gm-tint small { font: 11px system-ui, sans-serif; opacity: 0.7; }
.gm-tint__dot { width: 10px; height: 10px; border-radius: 50%; }
.gm-tint--violet { background: rgba(139, 92, 246, 0.22); }
.gm-tint--violet .gm-tint__dot { background: #c4b5fd; box-shadow: 0 0 8px rgba(196, 181, 253, 0.6); }
.gm-tint--rose   { background: rgba(244, 63, 94, 0.22); }
.gm-tint--rose .gm-tint__dot   { background: #fda4af; box-shadow: 0 0 8px rgba(253, 164, 175, 0.6); }
.gm-tint--cyan   { background: rgba(6, 182, 212, 0.22); }
.gm-tint--cyan .gm-tint__dot   { background: #67e8f9; box-shadow: 0 0 8px rgba(103, 232, 249, 0.6); }