webdevpuneet.com

Three-Tier Pricing

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

5 sectionsView all →
Pricing

Three-Tier Pricing

Responsive · Animated
Pricing

Pricing Comparison Table

Responsive · Animated
Pricing

Dark Glow Pricing

Responsive · Animated
Pricing

Single Plan Pricing

Responsive · Animated
Pricing

Pricing List Rows

Responsive · Animated

Three-Tier Pricing — Free Website Section Template

Pricing · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue

CategoryPricing
Tagspricingplansbilling togglesaascardsmost popularlight
Updated October 20, 2026

Extend with AI

Take This Section Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Three plan cards with a highlighted "Most popular" plan
Monthly/yearly switch: GSAP Flip pill and rolling price change
Accessible switch (aria-pressed) that works without JavaScript animation
Plans as a list: add up to 4, duplicate, reorder, remove
Monthly and yearly price per plan, features one per line
Price note replaces the suffix for free or custom plans
Optional note under the plans for trials, currency or taxes
Container-query layout: three columns down to one
Export HTML, a ZIP, React or Vue with the switch included

About this section

Three-Tier Pricing — Free Pricing Table Template With Toggle

Three-Tier Pricing: The classic SaaS pricing table: three plan cards side by side with the middle one highlighted as "Most popular", each with a name, short description, price, button and feature checklist. A monthly/yearly switch above the cards swaps every price, with the toggle sliding across and the new prices rolling in.

Three-Tier Pricing is the pricing layout most SaaS products use: three plan cards side by side, the middle one highlighted with a "Most popular" badge, and a monthly/yearly switch above them. Each card has a plan name, a line about who it's for, the price, a button and a checklist of what's included.

A billing switch that feels good

Click Yearly and every price changes at once. The highlight pill slides across with GSAP Flip, and the new prices roll into place. It's built for real use: the buttons say which option is selected (aria-pressed), it works without GSAP (prices still switch instantly) and the animation is skipped for people who prefer reduced motion. Turn the switch off for one-price plans.

Plans you can edit

Plans are a list: add a fourth, remove one, reorder or duplicate them. Type the monthly and yearly price for each, its features one per line, and its button text and link. Any plan with a badge gets the highlighted border and the filled button; the others get outline buttons. A price note such as "free forever" or "tailored to your team" replaces the /month suffix for free and custom plans.

Theme, motion and exports

Colours, fonts and corner radius come from the shared theme, so the table matches your hero and features. The heading reveals with SplitText and the cards stagger in on scroll. Export a single HTML file, a ZIP, a React or Vue component (the switch and its animation included), or fork into My Code.

Why use it

Why Use the Three-Tier Pricing

★
Guides the choice
A highlighted middle plan anchors the decision, which is why three tiers with a "Most popular" badge is the SaaS standard.
⇄
Yearly savings, visible
The switch and its "Save 20%" badge show the yearly discount without cluttering the cards.
✓
Works for real
The switch ships as tiny, dependency-light JavaScript that works in HTML, React and Vue exports.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading, monthly / yearly switch, plans and note under the plans in the panel. Switch the monthly / yearly switch on or off. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

💳
SaaS pricing page
Show Free, Pro and Business plans with monthly and yearly prices, the trial terms in the note and a "Contact sales" button on the top tier.
🎓
Course or membership tiers
Offer basic, plus and premium access with the lessons, community and coaching each includes listed as features.
🧰
Service packages
Freelancers can turn the plans into starter, standard and premium packages and switch the billing toggle off for one-off prices.
📱
App subscription screen
Use it on an app’s website to compare free and paid tiers, highlighting the plan you most want people to choose.

In real websites

Website Templates That Use the Three-Tier Pricing Section

The Three-Tier Pricing section is part of 4 complete website templates in the free Website Builder, so you can see it in a full page before you use it on its own: SaaS Landing Page, Gym & Fitness Website, Coach & Consultant Website, Event & Conference Website. Open any of them in the builder to edit the whole page, or keep customising this section by itself.

Got questions?

Frequently Asked Questions

Clicking Yearly adds an is-yearly class to the section, and CSS shows the yearly prices instead of the monthly ones. GSAP Flip slides the highlight pill to the clicked option and the new prices roll in. Without GSAP the prices still switch, just without animation.

Yes. Switch off the Monthly / yearly switch group and only the monthly price and suffix are shown.

Type anything in a plan’s Highlight badge field, such as "Most popular" or "Best value". That plan gets the brand border, the badge and a filled button.

Yes. The exported component includes the switch script and loads GSAP and the Flip plugin from a CDN after it mounts.

It saves an editable copy of your Three-Tier Pricing in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.