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
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…
In the same spirit

Landing stamp
FreeA three-step application tracker where a “Validated” stamp lands on each card as it reaches the screen.
- Tailwind
- React
- CSS
- WordPress

Layered parallax
FreeA mountain landscape in several planes that slide at different speeds while scrolling.
- Tailwind
- React
- CSS
- WordPress

Drifting clouds
FreeA sunrise sky where clouds slowly drift behind the heading and the tagline.
- Tailwind
- React
- CSS
- WordPress

Confetti shower
FreeA celebration banner where coloured confetti tumbles down behind the announcement.
- Tailwind
- React
- CSS
- WordPress