Design for AIRodapé com sombra suave
Rodapé com sombra suave: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
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
Construa um card branco de 300px com raio de 16px e uma sombra suave 0 10px 40px -12px rgba(15,23,42,.18). Topo: placeholder de imagem de 150px com gradiente de 120deg #d9f99d para #4ade80. Padding do corpo 18px 20px 12px: título 17px #0f172a, texto 14px #475569. Linha de rodapé separada por uma borda superior de 1px #f1f5f9, texto 12px em #64748b, dois spans afastados com flex space-between ("5 min read" e "Product").