14nov
Concierto
Noche de jazz en el puerto
21:00, Muelle 2 (Valencia)
00días00horas00min00seg
HTML + CSSKarten
Eventkarte mit Countdown
Eine Konzertkarte mit Datum, Ziffern, die sich jede Sekunde drehen, und einem Kalender-Button.
Einstellungen
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">Konzert</p><h3>Jazznacht am Hafen</h3><p class="pl">21 Uhr, Kai 2 (Valencia)</p></div></div><div class="cd" aria-live="off"><span class="u"><b data-k="d">00</b><span>Tage</span></span><span class="u"><b data-k="h">00</b><span>Std.</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>Sek.</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>Zum Kalender hinzufügen</button></article>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Karten
Alle ansehen: KartenWofür du ihn nutzen kannst
Countdowns erzeugen Dringlichkeit für Launches, Konzerte, Webinare und Sales. Diese nächtliche Karte zeigt das Datum als kleine Kachel, Name und Ort des Events sowie vier Zähler für Tage, Stunden, Minuten und Sekunden. Jede Ziffer dreht sich bei einer Änderung kurz in 3D herein. Ein heller Button trägt das Event in den Kalender ein.
Die verbleibenden Tage stellst du mit dem Zusatzregler ein oder ersetzt das Enddatum im Skript durch dein echtes. Die Drehung respektiert reduzierte Bewegung, die Farben kommen aus den zwei Farbreglern.