Design for AIEstadística con sparkline
Estadística con sparkline: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
CSS
.card-061 {
display: flex;
flex-direction: column;
width: 230px;
padding: 18px 20px 0;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
overflow: hidden;
font-family: system-ui,sans-serif;
color: #111827
}
.card-061 span {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .06em;
color: #6b7280
}
.card-061 strong {
margin: 6px 0 10px;
font-size: 30px;
font-weight: 700;
letter-spacing: -.02em
}
.card-061 svg {
width: calc(100% + 40px);
height: 44px;
margin: 0 -20px;
display: block
}
.card-061:hover svg path:first-child {
stroke: #1d4ed8;
stroke-width: 2.5
}
HTML
<article class="card-061">
<span>Weekly signups</span>
<strong>1,204</strong>
<svg viewBox="0 0 120 36" preserveAspectRatio="none"><path d="M0 28L15 22 30 25 45 14 60 18 75 9 90 12 105 4 120 8" fill="none" stroke="#2563eb" stroke-width="2" stroke-linejoin="round"/><path d="M0 28L15 22 30 25 45 14 60 18 75 9 90 12 105 4 120 8V36H0z" fill="url(#card-061-g)"/><defs><linearGradient id="card-061-g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#2563eb" stop-opacity=".25"/><stop offset="1" stop-color="#2563eb" stop-opacity="0"/></linearGradient></defs></svg>
</article>Prompt
Crea una tarjeta KPI de 230px con sparkline: blanca, borde 1px #e5e7eb, radio 14px, overflow hidden, padding 18px 20px y sin padding inferior. Etiqueta en mayúsculas 12px #6b7280, número 30px bold "1,204", luego un SVG inline (viewBox 0 0 120 36, preserveAspectRatio none) que sangra de borde a borde en la parte inferior de la tarjeta: una polilínea azul #2563eb de 2px sobre un relleno degradado vertical que se desvanece del 25% azul a transparente. En hover la línea engorda (2.5) y oscurece (#1d4ed8).