Design for AIBlocos de estatísticas bento
Blocos de estatísticas bento: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
1.2Mrequests in the last 24 hours
99.9%uptime
42msp95 latency
Zero configDeploy from a git push
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
}
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>Prompt
Construa um grid bento com quatro blocos: duas colunas de 160px com gap de 12px. Os blocos são brancos com borda de 1px #e5e7eb, raio de 16px, padding de 18px, subindo 3px com uma sombra suave no hover. O bloco 1 ocupa as duas colunas ("1.2M / requests in the last 24 hours"), os blocos 2 e 3 são simples ("99.9% uptime", "42ms p95 latency"), o bloco 4 ocupa as duas colunas e é escuro (gradiente de 135deg #111827 para #1f2937, texto branco, legenda cinza #9ca3af). Números em 24px extra-bold, legendas em 13px #6b7280.