¿A dónde viajamos?
HTML + CSSCards
Swipeable card deck
Drag the top card sideways and it flies off; the like and skip buttons do the same.
Settings
16px
1x
Code
<div class="uv-ksd"><p class="ti">Where shall we go?</p><div class="dk"><article style="--g:#ff9a8b,#ff6a88"><span class="ph"></span><b>Kyoto</b><span>Japan</span><i class="nope">Skip</i><i class="like">Like</i></article><article style="--g:#ffd36e,#f79d5c"><span class="ph"></span><b>Lisbon</b><span>Portugal</span><i class="nope">Skip</i><i class="like">Like</i></article><article style="--g:#89f7fe,#66a6ff"><span class="ph"></span><b>Iceland</b><span>Ring Road</span><i class="nope">Skip</i><i class="like">Like</i></article><article style="--g:#f6d365,#fda085"><span class="ph"></span><b>Marrakech</b><span>Morocco</span><i class="nope">Skip</i><i class="like">Like</i></article></div><div class="bt"><button type="button" class="no" aria-label="Skip"><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="Like"><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 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
Swipe decks make choosing feel like a game, which is why dating, travel and recipe apps use them. Drag the top card and it follows your finger with a slight rotation while a like or skip stamp fades in; past a threshold it flies off and goes to the back of the pile, otherwise it springs back into place.
Two round buttons below do the same for mouse and keyboard users. The cards are plain articles with a gradient background, so you can swap in photos, prices or profiles and keep the gesture logic.