Face-down tarot cards
Three tarot cards in a fan: the one you pick flips over in 3D and reveals its golden arcana.
Settings
Code
<fieldset class="uvq04-tar"><legend>Pick a card</legend><div class="dk"><label style="--r:-9deg;--y:0.5em"><input type="radio" name="uvq04-tar"><span class="cd"><span class="bk" aria-hidden="true"></span><span class="fc"><small>XIX</small><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1"/></svg><b>The Sun</b></span></span></label><label style="--r:0deg;--y:0em"><input type="radio" name="uvq04-tar"><span class="cd"><span class="bk" aria-hidden="true"></span><span class="fc"><small>XVIII</small><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15.5 3.5a8.6 8.6 0 1 0 5 14.6A7 7 0 0 1 15.5 3.5z"/></svg><b>The Moon</b></span></span></label><label style="--r:9deg;--y:0.5em"><input type="radio" name="uvq04-tar"><span class="cd"><span class="bk" aria-hidden="true"></span><span class="fc"><small>XVII</small><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.5l2.3 6.9 6.9 2.6-6.9 2.6L12 21.5l-2.3-6.9L2.8 12l6.9-2.6z"/></svg><b>The Star</b></span></span></label></div></fieldset>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 Radio buttons
See all Radio buttonsWhere to use it
Three cards lie face down in a slight fan, with a navy back, a gold border and a diamond pattern. Picking one flips it over in 3D to show a cream face with a Roman numeral, a line drawn sun, moon or star and its name, while the other two fade back. It is a playful radio group for horoscope pages, quizzes, games and daily prompts.
The main color is the gold and the secondary color the card back, so silver on black or copper on green change the mood. No card is chosen at first, which keeps the reveal; replace the icons and names with your own set.