Building a Pricing Table: Responsive UI Grids with Tailwind CSS

Previously in this course, we covered the fundamentals of building a card component and mastering grid layouts. In this lesson, we’ll combine those skills to build a production-grade pricing table—a critical UI component for any marketing site.

The Anatomy of a Pricing Grid

A well-designed pricing table isn't just about columns; it's about hierarchy. We need to clearly differentiate between "standard" plans and a "featured" or "pro" plan.

To achieve this, we will use a CSS Grid container for the layout and our existing knowledge of building a card component to represent individual plans.

Worked Example: Building the Grid

We will create a three-column layout that collapses into a single column on mobile. We’ll also use a distinct border and scale to "highlight" the middle card.

HTML
style="color:#808080"><style="color:#4EC9B0">div class="max-w-6xl mx-auto py-12 px-4">
  <!-- Grid Container -->
  style="color:#808080"><style="color:#4EC9B0">div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
    
    <!-- Standard Plan -->
    style="color:#808080"><style="color:#4EC9B0">div class="border border-gray-200 rounded-lg p-8 shadow-sm">
      style="color:#808080"><style="color:#4EC9B0">h3 class="text-xl font-bold">Basicstyle="color:#808080"></style="color:#4EC9B0">h3>
      style="color:#808080"><style="color:#4EC9B0">p class="text-4xl font-bold my-4">$10style="color:#808080"></style="color:#4EC9B0">p>
      style="color:#808080"><style="color:#4EC9B0">button class="w-full py-2 bg-gray-100 rounded">Choose Planstyle="color:#808080"></style="color:#4EC9B0">button>
    style="color:#808080"></style="color:#4EC9B0">div>

    <!-- Featured Plan (Highlighted) -->
    style="color:#808080"><style="color:#4EC9B0">div class="border-2 border-blue-500 rounded-lg p-8 shadow-xl scale-105 bg-white">
      style="color:#808080"><style="color:#4EC9B0">span class="text-blue-600 font-semibold uppercase text-sm">Recommendedstyle="color:#808080"></style="color:#4EC9B0">span>
      style="color:#808080"><style="color:#4EC9B0">h3 class="text-2xl font-bold mt-2">Prostyle="color:#808080"></style="color:#4EC9B0">h3>
      style="color:#808080"><style="color:#4EC9B0">p class="text-5xl font-bold my-4">$30style="color:#808080"></style="color:#4EC9B0">p>
      style="color:#808080"><style="color:#4EC9B0">button class="w-full py-2 bg-blue-600 text-white rounded">Choose Planstyle="color:#808080"></style="color:#4EC9B0">button>
    style="color:#808080"></style="color:#4EC9B0">div>

    <!-- Standard Plan -->
    style="color:#808080"><style="color:#4EC9B0">div class="border border-gray-200 rounded-lg p-8 shadow-sm">
      style="color:#808080"><style="color:#4EC9B0">h3 class="text-xl font-bold">Enterprisestyle="color:#808080"></style="color:#4EC9B0">h3>
      style="color:#808080"><style="color:#4EC9B0">p class="text-4xl font-bold my-4">$99style="color:#808080"></style="color:#4EC9B0">p>
      style="color:#808080"><style="color:#4EC9B0">button class="w-full py-2 bg-gray-100 rounded">Choose Planstyle="color:#808080"></style="color:#4EC9B0">button>
    style="color:#808080"></style="color:#4EC9B0">div>
  style="color:#808080"></style="color:#4EC9B0">div>
style="color:#808080"></style="color:#4EC9B0">div>

Key Considerations for Pricing UI

Hands-on Exercise

1. Add a list of "features" (e.g., checkmark icons) inside each pricing card using a <ul> element.
2. Ensure the list items are spaced consistently using space-y-2 on the container.
3. Add a transition-transform utility to the featured card to make the scale-105 effect smooth when combined with a hover state.

Common Pitfalls

• Fixed Heights: Avoid setting fixed heights on your cards. Content length in pricing tables often changes (e.g., different feature counts). Use flex or grid to ensure cards grow naturally with their content.
• Ignoring Mobile: Don't forget that on small screens, a 3-column grid becomes unreadable. Always use grid-cols-1 as your base and scale up to md:grid-cols-3.
• Over-complicating: If you find yourself writing hundreds of lines of CSS, you are likely missing the point of utility-first styling. Keep your HTML clean by using shared classes for standard cards and only adding specific classes for the "highlighted" variant.

FAQ

Q: How do I handle very long feature lists? A: Use a consistent padding inside the card and ensure your gap utilities are generous enough that long lists don't visually merge with the card borders.

Q: Should I use a library for this? A: For beginners, building from scratch is the best way to learn how the box model and grid alignment actually work. Once you are comfortable, you can look into component libraries.

Recap

We’ve successfully built a responsive pricing table by structuring a grid, using scale and border utilities to create visual hierarchy, and ensuring mobile-first compatibility. This component acts as a cornerstone for your marketing site, bringing together layout, typography, and interactive styles.

Up next: We will dive into creating advanced hover effects to add polish to these interactive cards.