FlowCraft UI: SaaS Pricing Toggle Matrix

Zero-dependency SaaS pricing table with a Monthly / Annual toggle, built with Tailwind CSS and Vanilla JS. Includes index.html (UI), app.js (toggle logic and price math), style.css (toggle animation) and .htaccess (hosting settings).

What it does:

- Three plan columns with the middle plan highlighted as "Most popular"

- Pill-shaped Monthly / Annual (Save 20%) toggle with a smooth sliding animation

- Every price, "/mo" ↔ "/yr" and the yearly savings update instantly

- Enter monthly prices and the discount; the annual prices and savings are calculated for you

- Plan buttons pass the chosen plan and billing to your signup or contact page (?plan=…&billing=…)

- Keyboard and screen-reader friendly; respects reduced-motion settings

- Heavily commented JavaScript

No npm install or build step. Works from any web host, or opened directly from your computer.

Try the live demo: https://haveinsights.com/flowcraft/pricing-matrix/

License: One purchase may be used and modified in unlimited personal and client projects. Standalone resale, sharing, and redistribution are not permitted.

Support: support@haveinsights.com