Pricing Table UI Kit — Responsive Pricing Cards with Monthly/Yearly Toggle (HTML/CSS/JS)

A ready-to-use pricing table UI kit for any website. Three plan cards (Starter, Pro, Business), a monthly/yearly billing toggle that recalculates every price with a 20% yearly discount, a highlighted "Most Popular" plan, tick/cross feature lists, a plan-selection status line and an FAQ accordion. Pure HTML, CSS and vanilla JavaScript — no frameworks, no build step, no dependencies.

Features

• Monthly/Yearly toggle with automatic 20%-off price recalculation
• "Most Popular" highlighted plan card with badge
• Tick/cross feature comparison lists
• Fully responsive — 3 columns on desktop, stacked cards on mobile
• FAQ accordion (one open at a time, ARIA states included)
• Zero dependencies — works offline, only ~14 KB total

What's Inside

index.html (the pricing page — edit plan names, features and data-monthly prices), pricing.css (all styles, re-theme via CSS variables), pricing.js (toggle maths, plan chooser, FAQ accordion) and README.txt (setup + customisation guide). Change a price in one place and the yearly price updates automatically.

Need a Custom Website or Mobile App?

Downloading free code is just the start. Yadu Tech builds complete websites and mobile apps for businesses — design, development, deployment, all done for you.

👉 Chat on WhatsApp