¿A dónde viajamos?

KiotoJapónPaso
LisboaPortugalPaso
IslandiaRing RoadPaso
MarrakechMarruecosPaso
HTML + CSSKarten

Wischbarer Kartenstapel

Zieh die oberste Karte zur Seite und sie fliegt davon; die Like- und Überspringen-Buttons tun dasselbe.

Einstellungen

16px
1x

Code

<div class="uv-ksd"><p class="ti">Wohin reisen wir?</p><div class="dk"><article style="--g:#ff9a8b,#ff6a88"><span class="ph"></span><b>Kyoto</b><span>Japan</span><i class="nope">Weiter</i><i class="like">Gefällt mir</i></article><article style="--g:#ffd36e,#f79d5c"><span class="ph"></span><b>Lissabon</b><span>Portugal</span><i class="nope">Weiter</i><i class="like">Gefällt mir</i></article><article style="--g:#89f7fe,#66a6ff"><span class="ph"></span><b>Island</b><span>Ring Road</span><i class="nope">Weiter</i><i class="like">Gefällt mir</i></article><article style="--g:#f6d365,#fda085"><span class="ph"></span><b>Marrakech</b><span>Marokko</span><i class="nope">Weiter</i><i class="like">Gefällt mir</i></article></div><div class="bt"><button type="button" class="no" aria-label="Verwerfen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button><button type="button" class="ys" aria-label="Gefällt mir"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg></button></div></div>

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: Karten

Wofür du ihn nutzen kannst

Wischstapel machen Auswählen zum Spiel, deshalb nutzen Dating-, Reise- und Rezept-Apps sie. Zieh die oberste Karte, sie folgt dem Finger mit leichter Drehung, während ein Like- oder Weiter-Stempel einblendet. Über einer Schwelle fliegt sie davon und wandert nach hinten, sonst federt sie zurück an ihren Platz.

Zwei runde Buttons darunter erledigen dasselbe für Maus und Tastatur. Die Karten sind einfache Artikel mit Verlauf, du kannst also Fotos, Preise oder Profile einsetzen und die Gestenlogik behalten.