*Build a SaaS Landing Page — chapter 4 of 6.* Icon cards in a responsive grid.

What you will build#

Six features, three columns.

Step by step#

example
html
<section class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
  <div class="p-6 rounded-2xl border bg-white hover:shadow-lg transition">
    <div class="size-10 rounded-lg bg-blue-100 grid place-items-center">⚡</div>
    <h3 class="mt-4 font-semibold">Fast</h3>
    <p class="mt-1 text-sm text-slate-600">Instant everything.</p>
  </div>
</section>

Why it works#

grid + gap is the only code a feature grid needs.

Try it yourself#

  • Add icons per card
  • Alternate card fills
  • Add hover-lift

Series navigation#

tutorials/index|All tutorials · tutorials/saas-landing/hero|← The hero · tutorials/saas-landing/pricing|Pricing table →