How to Build a Pricing Page with Tailwind CSS (Monthly/Yearly Toggle)

Every SaaS product needs a pricing page. Here's how to build one with Tailwind CSS that includes a working monthly/yearly toggle, responsive cards, and proper dark mode support.

The Structure

A good pricing page has three parts: a header (title + toggle), pricing cards (2-3 plans), and a feature comparison (optional). Let's build each.

Step 1: The Toggle

Monthly/yearly pricing toggle with a "Save 20%" badge on yearly.

<div class="flex items-center justify-center gap-3">
  <span class="text-sm text-neutral-600 dark:text-neutral-400">Monthly</span>
  <button id="pricing-toggle" type="button" role="switch" aria-checked="false"
    class="relative w-12 h-6 bg-neutral-200 dark:bg-neutral-700 rounded-full transition-colors">
    <span class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform"></span>
  </button>
  <span class="text-sm text-neutral-600 dark:text-neutral-400">Yearly</span>
  <span class="text-xs bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300 px-2 py-0.5 rounded-full">Save 20%</span>
</div>

Step 2: Pricing Cards

Three cards — Free, Pro (highlighted), and Enterprise. The highlighted card uses your accent color.

Pricing cards with toggle — from OpenTailwind — View & copy code

Key design decisions:

Highlight the recommended plan with a colored border or background
Show the price prominently with the billing period below
List 4-6 features per plan — enough to differentiate, not enough to overwhelm
Use checkmarks for included features, dashes or X marks for excluded

Step 3: The Toggle JavaScript

const toggle = document.getElementById('pricing-toggle');
const monthlyPrices = document.querySelectorAll('[data-price="monthly"]');
const yearlyPrices = document.querySelectorAll('[data-price="yearly"]');

toggle.addEventListener('click', () => {
  const isYearly = toggle.getAttribute('aria-checked') === 'true';
  toggle.setAttribute('aria-checked', !isYearly);

  // Toggle visual state
  toggle.querySelector('span').style.transform =
    !isYearly ? 'translateX(24px)' : 'translateX(0)';
  toggle.style.backgroundColor =
    !isYearly ? 'rgb(99 102 241)' : ''; // indigo-500

  // Toggle prices
  monthlyPrices.forEach(el => el.classList.toggle('hidden', !isYearly));
  yearlyPrices.forEach(el => el.classList.toggle('hidden', isYearly));
});

More Pricing Layouts

Not every product fits the 3-card layout. Here are alternatives:

Single highlighted plan — great for simple products — View & copy code

Four-column pricing for products with many tiers — View & copy code

💡 Pro tip: Always show the yearly price as a monthly equivalent (e.g., '$8/mo billed annually') — it looks cheaper and converts better than showing the full annual price.

All pricing blocks shown here are available on OpenTailwind with full dark mode support and working toggles.

Step 1: The Toggle

Monthly/yearly pricing toggle with a "Save 20%" badge on yearly.

<div class="flex items-center justify-center gap-3"> <span class="text-sm text-neutral-600 dark:text-neutral-400">Monthly</span> <button id="pricing-toggle" type="button" role="switch" aria-checked="false" class="relative w-12 h-6 bg-neutral-200 dark:bg-neutral-700 rounded-full transition-colors"> <span class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform"></span> </button> <span class="text-sm text-neutral-600 dark:text-neutral-400">Yearly</span> <span class="text-xs bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300 px-2 py-0.5 rounded-full">Save 20%</span> </div>

Step 2: Pricing Cards

Three cards — Free, Pro (highlighted), and Enterprise. The highlighted card uses your accent color.

Pricing cards with toggle — from OpenTailwind — View & copy code

Key design decisions:

Highlight the recommended plan with a colored border or background

Show the price prominently with the billing period below

List 4-6 features per plan — enough to differentiate, not enough to overwhelm

Use checkmarks for included features, dashes or X marks for excluded

Step 3: The Toggle JavaScript

const toggle = document.getElementById('pricing-toggle'); const monthlyPrices = document.querySelectorAll('[data-price="monthly"]'); const yearlyPrices = document.querySelectorAll('[data-price="yearly"]'); toggle.addEventListener('click', () => { const isYearly = toggle.getAttribute('aria-checked') === 'true'; toggle.setAttribute('aria-checked', !isYearly); // Toggle visual state toggle.querySelector('span').style.transform = !isYearly ? 'translateX(24px)' : 'translateX(0)'; toggle.style.backgroundColor = !isYearly ? 'rgb(99 102 241)' : ''; // indigo-500 // Toggle prices monthlyPrices.forEach(el => el.classList.toggle('hidden', !isYearly)); yearlyPrices.forEach(el => el.classList.toggle('hidden', isYearly)); });

More Pricing Layouts

Not every product fits the 3-card layout. Here are alternatives:

Single highlighted plan — great for simple products — View & copy code

Four-column pricing for products with many tiers — View & copy code

💡 Pro tip: Always show the yearly price as a monthly equivalent (e.g., '$8/mo billed annually') — it looks cheaper and converts better than showing the full annual price.

All pricing blocks shown here are available on OpenTailwind with full dark mode support and working toggles.