Bento Grid Layout

<div class="bento">
  <div class="bx b-lg"><b>2.4k</b><span>Active users</span></div>
  <div class="bx b-pink">📈</div>
  <div class="bx b-blue">⚡</div>
  <div class="bx b-wide"><b>Analytics</b><span>Real-time insights</span></div>
  <div class="bx b-green">✓</div>
</div>

body{background:#0d1426}
.bento{display:grid;grid-template-columns:repeat(3,90px);grid-auto-rows:90px;gap:12px;font-family:system-ui,sans-serif}
.bx{border-radius:18px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:14px;color:#fff;font-size:26px;transition:transform .2s}
.bx:hover{transform:scale(1.04)}
.bx b{font-size:24px}.bx span{font-size:11px;opacity:.85;margin-top:2px}
.b-lg{grid-row:span 2;background:linear-gradient(135deg,#ff7a18,#ff477e);align-items:flex-start;justify-content:flex-end;text-align:left}
.b-pink{background:#ff477e}.b-blue{background:#5b6cff}.b-green{background:#16a34a}
.b-wide{grid-column:span 2;background:#1a2540;align-items:flex-start;justify-content:center;text-align:left}