Design for AIReceta con chips
Receta con chips: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
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
Construye una tarjeta de receta de 300px: blanca, radio 18px, sombra 0 4px 20px rgba(0,0,0,.08). Zona de imagen de 180px con un degradado radial verde (#bef264 a #65a30d a #3f6212). Cuerpo: título 17px, una fila con ajuste de pequeños chips píldora ("25 min", "Vegetarian", "Easy") sobre #f5f5f4 con texto 11px semibold #44403c, y un botón verde #65a30d "View recipe" (radio 10px) que oscurece a #4d7c0f en hover.