14nov
Concierto
Noche de jazz en el puerto
21:00, Muelle 2 (Valencia)
00días00horas00min00seg
HTML + CSSCards
Evento con cuenta atrás
Una tarjeta de concierto con la fecha, cifras que giran cada segundo y un botón para añadirlo al calendario.
Ajustes
16px
1x
12
Código
<article class="uv-kec"><div class="hd"><span class="dt"><b>14</b><span>nov</span></span><div><p class="kd">Concierto</p><h3>Noche de jazz en el puerto</h3><p class="pl">21:00, Muelle 2 (Valencia)</p></div></div><div class="cd" aria-live="off"><span class="u"><b data-k="d">00</b><span>días</span></span><span class="u"><b data-k="h">00</b><span>horas</span></span><span class="u"><b data-k="m">00</b><span>min</span></span><span class="u"><b data-k="s">00</b><span>seg</span></span></div><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="5" width="17" height="15" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4M12 13v4M10 15h4"/></svg>Añadir al calendario</button></article>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 Cards
Ver todos: CardsDónde usarlo
Las cuentas atrás crean urgencia para lanzamientos, conciertos, webinars y rebajas. Esta tarjeta nocturna muestra la fecha en una pequeña ficha, el nombre del evento y el lugar, y cuatro contadores de días, horas, minutos y segundos; cada cifra entra con un breve giro en 3D al cambiar. Un botón brillante lo añade al calendario.
Ajusta cuántos días quedan con el control extra o cambia la fecha final del script por la real. El giro respeta el movimiento reducido y los colores salen de los dos controles de color.