Design for AIRezept-Chips
Rezept-Chips: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
CSS
.card-081 {
width: 300px;
background: #fff;
border-radius: 18px;
overflow: hidden;
font-family: system-ui,sans-serif;
color: #1c1917;
box-shadow: 0 4px 20px rgba(0,0,0,.08)
}
.card-081__img {
height: 180px;
background: radial-gradient(circle at 40% 40%,#bef264,#65a30d 55%,#3f6212)
}
.card-081__body {
padding: 16px 18px 18px
}
.card-081 h3 {
margin: 0 0 10px;
font-size: 17px;
line-height: 1.3
}
.card-081__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px
}
.card-081__chips span {
padding: 4px 9px;
border-radius: 999px;
background: #f5f5f4;
font-size: 11px;
font-weight: 600;
color: #44403c
}
.card-081 a {
display: inline-block;
padding: 9px 16px;
border-radius: 10px;
background: #65a30d;
color: #fff;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: background .15s
}
.card-081 a:hover {
background: #4d7c0f
}
.card-081 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-081">
<div class="card-081__img"></div>
<div class="card-081__body">
<h3>Lemon orzo with charred broccoli</h3>
<div class="card-081__chips"><span>25 min</span><span>Vegetarian</span><span>Easy</span></div>
<a href="#">View recipe</a>
</div>
</article>Prompt
Baue eine 300px Rezept-Card: weiß, 18px Radius, Schatten 0 4px 20px rgba(0,0,0,.08). Bildbereich 180px mit radialem grünem Gradient (#bef264 zu #65a30d zu #3f6212). Body: 17px Titel, eine umbrechende Reihe kleiner Pillen-Chips ("25 min", "Vegetarian", "Easy") auf #f5f5f4 mit 11px semibold #44403c Text und ein grüner #65a30d "View recipe" Button (10px Radius), der beim Hover auf #4d7c0f abdunkelt.