HTML
<div class="gl-lw">
<header class="gl-lw-head">
<strong>Trusted by 14,000+ teams</strong>
<span class="gl-lw-coord">repeat(auto-fit, minmax(140px, 1fr))</span>
</header>
<div class="gl-lw-grid">
<div class="gl-lw-cell">◇ NORTHWIND</div>
<div class="gl-lw-cell">▲ APEX.IO</div>
<div class="gl-lw-cell">★ PULSE</div>
<div class="gl-lw-cell">⬣ HEXLAB</div>
<div class="gl-lw-cell">◯ ORBITA</div>
<div class="gl-lw-cell">◤ FLINT</div>
<div class="gl-lw-cell">⬢ MERIDIAN</div>
<div class="gl-lw-cell">◇ NIMBUS</div>
<div class="gl-lw-cell">▼ DRIFT</div>
<div class="gl-lw-cell">◎ ATLAS</div>
</div>
</div> CSS
.gl-lw {
display: flex; flex-direction: column;
gap: 16px;
width: 100%;
min-height: 480px;
padding: 22px;
background:
radial-gradient(60% 80% at 50% 0%, rgba(148,163,184,0.12), transparent 60%),
#0c1220;
font-family: 'Inter', system-ui, sans-serif;
color: #e2e8f0;
box-sizing: border-box;
justify-content: center;
}
.gl-lw-head {
text-align: center;
display: flex; flex-direction: column; align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.gl-lw-head strong { font-size: 16px; font-weight: 700; color: #fff; }
.gl-lw-coord {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.04em;
padding: 4px 10px; border-radius: 999px;
background: rgba(148,163,184,0.14); color: #94a3b8;
}
.gl-lw-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
}
.gl-lw-cell {
background: rgba(148,163,184,0.06);
border: 1px solid rgba(148,163,184,0.18);
border-radius: 10px;
padding: 22px 14px;
text-align: center;
font-family: 'JetBrains Mono', monospace;
font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
color: #94a3b8;
transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.gl-lw-cell:hover {
color: #38bdf8; border-color: #38bdf8;
background: rgba(56,189,248,0.08);
}
@media (prefers-reduced-motion: reduce) {
.gl-lw-cell { transition: none; }
}