Pricing Table Patterns with Tailwind: Making Plans Easy to Compare

1. The anatomy of a good pricing table

A working pricing table consists of three to four clearly separated plan cards, each with a plan name, price, a short target-audience description, a feature list, and a single clear call-to-action button. The order of plans should consistently run from cheapest to most expensive, since users typically compare prices reading left to right.

Every feature row should appear in the same order across all plan cards, even when a cheaper plan doesn't offer a given feature at all, so the visual comparison works at a glance. Without a consistent row structure, the user has to actively jump back and forth between cards to figure out where each feature is included, making the decision unnecessarily harder.

2. Visually highlighting the recommended plan

The recommended plan should stand out from the other cards through several simultaneous visual signals: a slightly larger border or shadow via ring-2 ring-indigo-600, a small badge reading something like 'Most popular', and optionally a slightly larger scale for the whole card compared to its neighbors on wider screens.

It matters to use this emphasis sparingly, on a single card only, since highlighting several plans at once completely neutralizes the signal and puts the user right back in front of an equally weighted, hard decision. The emphasis should also remain recognizable without relying on color alone, through the badge and extra border weight, so it works clearly for color-blind users too.

3. Styling feature comparison checkmarks consistently

Checkmarks for included features and a visually distinct symbol for missing ones (a gray dash or a gray X rather than a red one) need to match exactly in size, spacing, and vertical alignment across every plan card. A red X for missing features quickly reads as unnecessarily negative and alarming, a muted gray communicates the same information more calmly.

The feature label itself should sit to the left of the symbol and wrap cleanly for longer feature names without the icon and text shifting vertically relative to each other. A flex items-start gap-3 layout with a fixed icon size via shrink-0 prevents the icon from drifting downward when text wraps to a second line and losing alignment with the first line.

<ul class="mt-6 space-y-3 text-sm text-gray-700">
  <li class="flex items-start gap-3">
    <svg class="mt-0.5 h-5 w-5 shrink-0 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-7 7a1 1 0 01-1.4 0l-3-3a1 1 0 111.4-1.4l2.3 2.3 6.3-6.3a1 1 0 011.4 0z" clip-rule="evenodd" />
    </svg>
    Unlimited projects
  </li>
  <li class="flex items-start gap-3 text-gray-400">
    <svg class="mt-0.5 h-5 w-5 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M4.3 4.3a1 1 0 011.4 0L10 8.6l4.3-4.3a1 1 0 111.4 1.4L11.4 10l4.3 4.3a1 1 0 01-1.4 1.4L10 11.4l-4.3 4.3a1 1 0 01-1.4-1.4L8.6 10 4.3 5.7a1 1 0 010-1.4z" clip-rule="evenodd" />
    </svg>
    Priority support
  </li>
</ul>

4. Implementing a monthly/yearly toggle with discount display

A toggle between monthly and yearly billing should be placed centrally above all plan cards, so the selection applies to every card at once rather than requiring the user to switch each card individually. A small badge right next to the toggle reading something like 'Save 20 percent' makes the financial benefit of the yearly option immediately visible, without the user having to do the math themselves.

Technically, the toggle can be implemented cleanly with Alpine.js by defining a single reactive state that determines whether the monthly or yearly price is shown per plan card. The transition between the two prices benefits from a short CSS transition on the number itself, so the switch reads as a smooth price change rather than an abrupt jump.

5. Responsive behavior with three or more plan columns

On wide screens, three to four plan cards fit comfortably side by side in a grid grid-cols-3 gap-8 layout, with the highlighted middle card able to poke slightly above the row through a small negative margin for extra visual priority. With exactly four plans, an even four-column grid usually works better than forcing a three-column split with an awkward fourth card wrapping to the next row.

Starting at the tablet breakpoint, the grid should drop to two columns via md:grid-cols-2 before collapsing to a single column on mobile, since three cards squeezed side by side at medium screen widths would either truncate text or shrink buttons down to an unusable size.

6. On mobile: stack the cards instead of squeezing a table

On mobile devices, plan cards are best shown fully stacked via grid-cols-1, with generous vertical spacing through gap-6 between cards, so each card stays clearly separated and fully readable on its own. The recommended plan should appear as the first card in this stacked view, not in its original middle position, so it's visible without a lot of scrolling first.

Long feature lists can additionally be collapsed by default on mobile and expandable through a 'Show all features' link, to shorten the page's initial scroll length. This interaction can be built with a few lines of Alpine.js through a simple x-show toggle state, without needing any JavaScript beyond Hyva or Alpine.

7. Accessibility in pricing tables

If a pricing table is implemented technically as a semantic HTML table rather than a card layout, scope="col" on the plan column headers and scope="row" on the feature names should be set, so screen readers can correctly announce the relationship between a feature and a plan. With the more common card layout, a clear heading hierarchy using h3 per plan name performs the same structural job instead.

Checkmark and X icons must never be the only source of information, since they're invisible to screen readers without accompanying text. Text hidden via sr-only, like 'Included' or 'Not included' next to each icon, ensures the information comes through fully even without visually perceiving the symbol.

8. Pricing psychology principles and how design supports them

The so-called decoy effect, where a deliberately less attractive middle plan makes the more expensive plan look better by comparison, only works when the visual design makes that price-to-feature relationship clearly visible. A generous, easy-to-scan presentation of the extra features in the pricier plan matters more here than pure price styling.

Charm pricing with numbers like '19' instead of '20' only works visually when the number itself is displayed large and dominant, while the currency symbol and billing period sit deliberately smaller and in a muted gray beside it. That size hierarchy draws the eye to the smaller number first, before the full context registers.

9. Common mistakes in pricing tables and how to avoid them

A frequent mistake is a feature list that's too long, overwhelming the user rather than informing them. A curated selection of the five to eight features that actually matter for the purchase decision almost always works better in practice than a full technical listing of twenty system details, which belongs on a separate comparison page instead.

Another common mistake is inconsistent button labels across plans, like 'Start free' on one plan and just 'Choose' on another, which makes the table feel disjointed. Consistent but slightly plan-specific wording, like 'Choose Starter' and 'Choose Pro', reads more professional while also making later A/B test analysis easier.

10. Summary

11. FAQ: Pricing Tables with Tailwind: Key Takeaways