# Baldosas bento de estadísticas (C 042)

Categoría: Tarjetas  
Etiquetas: bento, grid, tiles, layout, light  
Página: https://designforai.dev/es/snippet/card-042

## Prompt

Construye una cuadrícula bento de cuatro baldosas: dos columnas de 160px con gap 12px. Las baldosas son blancas con borde 1px #e5e7eb, radio 16px, padding 18px, y se elevan 3px con una sombra suave en hover. La baldosa 1 ocupa ambas columnas ("1.2M / requests in the last 24 hours"), las baldosas 2 y 3 son simples ("99.9% uptime", "42ms p95 latency"), la baldosa 4 ocupa ambas columnas y es oscura (degradado a 135deg de #111827 a #1f2937, texto blanco, leyenda gris #9ca3af). Los números son 24px extra-bold, las leyendas 13px #6b7280.

## HTML

```html
<div class="card-042">
  <div class="card-042__tile card-042__tile--wide"><b>1.2M</b><span>requests in the last 24 hours</span></div>
  <div class="card-042__tile"><b>99.9%</b><span>uptime</span></div>
  <div class="card-042__tile"><b>42ms</b><span>p95 latency</span></div>
  <div class="card-042__tile card-042__tile--wide card-042__tile--accent"><b>Zero config</b><span>Deploy from a git push</span></div>
</div>
```

## CSS

```css
.card-042 {
  display: grid;
  grid-template-columns: repeat(2,160px);
  gap: 12px;
  font-family: system-ui,sans-serif
}
.card-042__tile {
  padding: 18px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  color: #111827;
  transition: transform .2s,box-shadow .2s
}
.card-042__tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08)
}
.card-042__tile--wide {
  grid-column: span 2
}
.card-042__tile--accent {
  background: linear-gradient(135deg,#111827,#1f2937);
  color: #fff;
  border-color: #111827
}
.card-042 b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em
}
.card-042 span {
  font-size: 13px;
  color: #6b7280
}
.card-042__tile--accent span {
  color: #9ca3af
}
```