*Build a SaaS Landing Page — chapter 5 of 6.* Three tiers with highlight.

What you will build#

The classic three-tier table.

Step by step#

example
html
<section class="grid md:grid-cols-3 gap-6 items-stretch">
  <div class="p-8 rounded-2xl border">Starter $0</div>
  <div class="p-8 rounded-2xl border-2 border-blue-600 shadow-xl relative">Pro $19 <span class="absolute -top-3 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs px-3 py-1 rounded-full">Popular</span></div>
  <div class="p-8 rounded-2xl border">Scale $99</div>
</section>

Why it works#

The elevated middle tier is a visual anchor — border-2 + shadow-xl + badge.

Try it yourself#

  • Add feature lists
  • Add monthly/yearly toggle placeholder
  • Mark enterprise

Series navigation#

tutorials/index|All tutorials · tutorials/saas-landing/features|← Features grid · tutorials/saas-landing/faq-cta-footer|FAQ, final CTA & footer →