14nov
Concierto
Noche de jazz en el puerto
21:00, Muelle 2 (Valencia)
00días00horas00min00seg
HTML + CSSCards
Event card with countdown
A concert card with its date, digits that flip every second and a button to add it to the calendar.
Settings
16px
1x
12
Code
<article class="uv-kec"><div class="hd"><span class="dt"><b>14</b><span>Nov</span></span><div><p class="kd">Concert</p><h3>Jazz night at the harbor</h3><p class="pl">9 pm, Pier 2 (Valencia)</p></div></div><div class="cd" aria-live="off"><span class="u"><b data-k="d">00</b><span>days</span></span><span class="u"><b data-k="h">00</b><span>hours</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>sec</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>Add to calendar</button></article>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
See all CardsWhere to use it
Countdowns create urgency for launches, concerts, webinars and sales. This night-themed card shows the date as a small tile, the event name and place, and four counters for days, hours, minutes and seconds; each digit flips in with a short 3D turn when it changes. A bright button adds the event to the calendar.
Set how many days remain with the extra slider, or replace the end date in the script with your real one. The flip respects reduced motion, and the card colors come from the two color controls.