Design for AISoft shadow footer
Soft shadow footer: a CSS card. Copy the rules, or the prompt that rebuilds it.
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
Build a 300px white card with 16px radius and a soft shadow 0 10px 40px -12px rgba(15,23,42,.18). Top: 150px image placeholder with 120deg gradient #d9f99d to #4ade80. Body padding 18px 20px 12px: 17px title #0f172a, 14px text #475569. Footer row separated by a 1px #f1f5f9 top border, 12px text in #64748b, two spans spaced apart with flex space-between ("5 min read" and "Product").