Skip to content
Forge

Shipping options

Radio cards to pick a shipping method, with each option's delay and price, and an order total that updates instantly.

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

Description

Each card is a whole label around a real radio button: the entire surface is clickable and the arrow keys move between options. The total is politely announced to screen readers. Amounts are computed in cents to avoid rounding errors.

Code

Loading the code…

Archive contents

choix-livraison-html-tailwind.zip3 files · 4 Ko

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

Tags

Updated on October 13, 2026.

In the same spirit

  • Order summary

    Free

    The cart summary before checkout: items with thumbnail and quantity, a free-shipping gauge, a promo code and a total recalculated on every change.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Product page

    Free

    A complete product page: product views, colors and sizes as radio buttons, a quantity selector and an announced add-to-cart.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Video testimonial with transcript

    Free

    A CSS-drawn video poster with a play button, the testimonial's key quote, its author, and the timestamped transcript in a collapsible panel.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Sortable table

    Free

    A data table where every column sorts with a click, ascending or descending, with no library.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component