Skip to content

Flipping cards

Three service cards that flip in 3D on hover or keyboard focus to reveal lead time, price and a quote link.

  • Tailwind
  • React
  • CSS
  • WordPress
Open in a new tab

Description

Each card shows a service on the front, then turns in 3D to show the lead time, starting price and a quote link on the back as soon as it is hovered, tapped on mobile or its link receives keyboard focus. Ideal for a craftsperson, an agency, a caterer or a plan comparison. Both faces share the same grid cell, so the card takes the height of its content, with no fixed height or script. Screen readers read both front and back. AA contrast in light and dark mode. With prefers-reduced-motion the card switches faces instantly, without rotating.

Code

Loading the code…

Archive contents

effet-carte-retournement-html-tailwind.zip3 files · 4 Ko

  • index.html7 Ko
  • README.md3 Ko
  • LICENSE.md1 Ko

Tags

Updated on October 18, 2026.

In the same spirit

  • A three-step application tracker where a “Validated” stamp lands on each card as it reaches the screen.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A mountain landscape in several planes that slide at different speeds while scrolling.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A sunrise sky where clouds slowly drift behind the heading and the tagline.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A celebration banner where coloured confetti tumbles down behind the announcement.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
Flipping cards — visual effects component, HTML and React | Forge