Design for AICinta de descuento
Cinta de descuento: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
-30%
Studio headphones
$199$285
CSS
.card-023 {
width: 240px;
padding: 12px;
background: #1c1c1e;
border-radius: 18px;
font-family: system-ui,sans-serif;
color: #f5f5f7
}
.card-023__img {
position: relative;
height: 190px;
border-radius: 12px;
overflow: hidden;
background: radial-gradient(circle at 50% 60%,#3a3a3c,#0b0b0c)
}
.card-023__img span {
position: absolute;
top: 14px;
right: -28px;
width: 110px;
padding: 4px 0;
text-align: center;
transform: rotate(45deg);
background: #ff453a;
font-size: 11px;
font-weight: 800
}
.card-023 h3 {
margin: 14px 6px 4px;
font-size: 15px;
font-weight: 600
}
.card-023 p {
margin: 0 6px 12px;
font-size: 15px
}
.card-023 b {
font-size: 18px
}
.card-023 s {
margin-left: 8px;
color: #8e8e93;
font-size: 13px
}
.card-023 button {
width: 100%;
padding: 10px;
border: 0;
border-radius: 10px;
background: #f5f5f7;
color: #1c1c1e;
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: background .15s,transform .15s
}
.card-023 button:hover {
background: #fff;
transform: translateY(-1px)
}
.card-023 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-023">
<div class="card-023__img"><span>-30%</span></div>
<h3>Studio headphones</h3>
<p><b>$199</b><s>$285</s></p>
<button>Buy now</button>
</article>Prompt
Construye una tarjeta de producto oscura de 240px sobre #1c1c1e con radio 18px y padding interior 12px. Bloque de imagen de 190px, radio 12px, degradado radial de #3a3a3c a #0b0b0c, con una cinta diagonal roja #ff453a "-30%" rotada 45deg cruzando la esquina superior derecha. Debajo: nombre de producto 15px en #f5f5f7, precio 18px bold y un precio anterior tachado en #8e8e93, luego un botón blanco roto (#f5f5f7) "Buy now" a ancho completo con radio 10px que se eleva 1px en hover.