Design for AIWeicher Schatten Footer
Weicher Schatten Footer: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
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
Baue eine 300px weiße Card mit 16px Radius und weichem Schatten 0 10px 40px -12px rgba(15,23,42,.18). Oben: 150px Bildplatzhalter mit 120deg Gradient #d9f99d zu #4ade80. Body-Padding 18px 20px 12px: 17px Titel #0f172a, 14px Text #475569. Footer-Zeile durch einen 1px #f1f5f9 oberen Rahmen abgetrennt, 12px Text in #64748b, zwei Spans per flex space-between auseinander gesetzt ("5 min read" und "Product").