Design for AIPie con sombra suave
Pie con sombra suave: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
Onboarding without the tour
Show the product, not the tooltips.
CSS
.card-004 {
width: 300px;
background: #fff;
border-radius: 16px;
overflow: hidden;
font-family: system-ui,sans-serif;
color: #0f172a;
box-shadow: 0 10px 40px -12px rgba(15,23,42,.18)
}
.card-004__img {
height: 150px;
background: linear-gradient(120deg,#d9f99d,#4ade80)
}
.card-004__body {
padding: 18px 20px 12px
}
.card-004 h3 {
margin: 0 0 6px;
font-size: 17px
}
.card-004 p {
margin: 0;
font-size: 14px;
color: #475569
}
.card-004__foot {
display: flex;
justify-content: space-between;
padding: 12px 20px;
border-top: 1px solid #f1f5f9;
font-size: 12px;
color: #64748b
}
HTML
<article class="card-004">
<div class="card-004__img"></div>
<div class="card-004__body">
<h3>Onboarding without the tour</h3>
<p>Show the product, not the tooltips.</p>
</div>
<footer class="card-004__foot"><span>5 min read</span><span>Product</span></footer>
</article>Prompt
Construye una tarjeta blanca de 300px con radio 16px y una sombra suave 0 10px 40px -12px rgba(15,23,42,.18). Arriba: marcador de imagen de 150px con degradado a 120deg de #d9f99d a #4ade80. Cuerpo con padding 18px 20px 12px: título 17px #0f172a, texto 14px #475569. Fila de pie separada por un borde superior 1px #f1f5f9, texto 12px en #64748b, dos spans separados con flex space-between ("5 min read" y "Product").