Instant CSS
HomeTailwind Components3-Tier Pricing Table
Tailwind CSS Component

3-Tier Pricing Table

A modern 3-tier pricing table — Free, Pro (highlighted as "Most Popular"), and Business — with monthly pricing, feature checklists, and CTA buttons. Includes a billing-cycle toggle, gradient accent on the highlighted plan, and a money-back guarantee banner below.

Live Preview

About this component

A modern 3-tier pricing table — Free, Pro (highlighted as "Most Popular"), and Business — with monthly pricing, feature checklists, and CTA buttons. Includes a billing-cycle toggle, gradient accent on the highlighted plan, and a money-back guarantee banner below.

What's included

  • Three pricing tiers — Free, Pro, Business
  • Pro plan highlighted with gradient ring + "Most Popular" badge
  • Monthly / Yearly billing toggle (saves 20%)
  • Feature checklist with green checks and muted grays
  • Strong primary CTA per plan with hover effects
  • Money-back guarantee banner below pricing
  • Trust indicators — payment methods, no card required
  • Fully responsive — 3 columns on desktop, stacks on mobile

Related searches

tailwind pricing tabletailwind pricing componentpricing card tailwind3 tier pricing tailwindsaas pricing tailwindfree tailwind pricingtailwind pricing togglemodern pricing table tailwind

Frequently asked questions

Common questions about using the 3-tier pricing table component.

Is this component free to use?
Yes. Every Tailwind component on Instant CSS is free for personal and commercial projects with no attribution required. Just copy the markup and ship.
Do I need to install Tailwind to use this?
You need Tailwind CSS available on your page — either through the Tailwind CLI, the Tailwind CDN script, or a framework integration (Next.js, Astro, Remix, etc.). The component is just HTML with utility classes.
Is this responsive on mobile and tablet?
Yes. Every component is built with Tailwind responsive prefixes (sm:, md:, lg:, xl:) so it adapts gracefully from phones up to large desktops.
Can I drop this into React, Vue, Svelte, or Astro?
Yes. The component is plain HTML — paste it into any framework component and replace event handlers (onclick, etc.) with framework equivalents (onClick, @click, on:click).
Does it support dark mode?
Yes. Components use Tailwind's dark: variant. Make sure your project enables darkMode: "class" or darkMode: "media" in tailwind.config.js, then the component picks up the user's theme automatically.
How do I make the billing toggle actually switch prices?
The toggle is wired with a tiny inline onclick that flips a CSS class on the price elements. In React/Vue replace it with state — track a billing variable and pick the right price (priceMonthly vs priceYearly) per plan.
How do I change the highlighted plan?
Look for the middle plan card that has the gradient ring (ring-2 ring-blue-500) and the "Most Popular" badge. Move those classes plus the badge HTML to whichever plan you want to highlight.
Can I add a fourth tier (Enterprise)?
Yes. Duplicate one of the plan cards and update the title, price, and feature list. Then change the grid from md:grid-cols-3 to md:grid-cols-2 lg:grid-cols-4 so all four tiers display nicely.

More Tailwind Components

Other free Tailwind components in the library.

View all →
Tailwind

Modern Header / Navbar

A clean, modern sticky header with logo, nav links, search, theme toggle, and a primary CTA. Includes a fully functional mobile drawer with a slide-in animation. Built with pure Tailwind utility classes.

View
Tailwind

Multi-Column Footer

A polished multi-column site footer with brand block, newsletter signup, four link columns (Product, Resources, Company, Legal), social icons, and a copyright bar. Fully responsive — collapses to two columns on tablet and stacks vertically on mobile.

View
Tailwind

Modern SaaS Hero Section

A conversion-focused, modern SaaS hero with eyebrow announcement pill, large headline with gradient highlight, subheadline, dual CTAs, social proof avatars + rating, and a glass-effect dashboard mockup. Includes a soft radial gradient background and decorative blur orbs.

View

Ready to use this component?

Open it in our editor and customize it to match your brand in minutes.

Browse all Tailwind components

See every free Tailwind component in the library.

Browse all