Skip to content
Forge

Renovation project card

A finished-project card with a before / after toggle, location, duration, type of work, indicative budget and a link to the details.

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

Description

Designed for building tradespeople's portfolios: each card shows the finished project photo and two Before / After buttons (aria-pressed) to compare, with a crossfade turned off by prefers-reduced-motion. Key facts form a definition list that screen readers announce properly, the budget stands out and the details link carries the project title in its accessible name. Without JavaScript the after photo stays visible with a static label. AA contrast in light and dark modes, a one to three column grid from 360 px.

Code

Loading the code…

Archive contents

carte-realisation-avant-apres-html-tailwind.zip3 files · 7 Ko

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

Tags

Updated on October 18, 2026.

In the same spirit

  • Contact card with address and map

    Free

    A “Find us” card bringing together address, access, phone, email and opening hours, with an OpenStreetMap map loaded on demand and buttons to call, email, get directions or copy the address.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Google reviews card

    Free

    A Google reviews summary block: average star rating, review count and breakdown, expandable recent reviews and a link to leave a review, with schema.org structured data.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • "Open now" hours card

    Free

    A shop card with the week's opening hours, today highlighted and a live status: open, closing soon, or closed with the reopening time.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Service card with icon

    Free

    Icon, title, short description, indicative price and link to the details.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component