Cupón en ticket troquelado
Un ticket con muescas y línea de corte: al aplicar un código válido la matriz se arranca y aparece un sello de descuento.
Ajustes
Código
<form class="uvq06-cp"><div class="tk"><div class="sb" aria-hidden="true"><b>%</b><span>Cupón</span></div><div class="mn"><label for="uvq06-cp-in">Código de descuento</label><div class="rw"><input id="uvq06-cp-in" autocomplete="off" spellcheck="false" maxlength="12" placeholder="CÓDIGO"><button type="submit">Aplicar</button></div><p class="ms" aria-live="polite">Prueba con AIMRAN20</p></div></div><span class="stp" aria-hidden="true">−20 %</span></form>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Inputs
Ver todos: InputsDónde usarlo
Un campo de código de descuento con forma de ticket de papel. Las máscaras de CSS recortan las muescas redondas a ambos lados de una línea de corte discontinua, y la matriz lleva un gran símbolo de porcentaje. Con un código válido la matriz se desprende girando mientras un sello de goma cae en su lugar; con uno incorrecto el ticket tiembla y explica el motivo.
Pon el color principal en el tono de tus promociones y escribe tus códigos en la pequeña tabla del script. Encaja en carritos, resúmenes de pago e inscripciones a eventos, mejor debajo del total para que el sello caiga junto al precio que cambia.