Tailwind CSS Academy · Lesson

Features and Social Proof Sections

Create a feature grid with icons and descriptions, followed by a testimonials section with avatar cards and star ratings.

Features Section Structure

A features section communicates the core value propositions of your product. A common pattern is a three or four column grid of feature cards, each with an icon, a short title, and a description. Above the grid, an eyebrow label and a section headline set the context. Use a light gray background bg-gray-50 to visually separate this section from the white hero.

<section class="bg-gray-50 px-4 py-24">
  <div class="mx-auto max-w-7xl">
    <!-- Section header -->
    <div class="mb-16 text-center">
      <span class="text-sm font-semibold uppercase tracking-widest text-blue-600">
        Why Launchify
      </span>
      <h2 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 md:text-4xl">
        Everything you need to launch faster
      </h2>
    </div>
    <!-- Feature grid -->
  </div>
</section>

Building the Feature Grid

Use CSS Grid to lay out feature cards. Start with a single column on mobile using grid grid-cols-1 and expand to three columns on large screens with lg:grid-cols-3. Add gap-8 for consistent spacing between cards. This approach ensures the feature grid looks great at every viewport width without media query gymnastics.

<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
  <!-- Feature card 1 -->
  <div class="rounded-2xl bg-white p-8 shadow-sm">
    <!-- Icon -->
    <!-- Title -->
    <!-- Description -->
  </div>
  <!-- Repeat for each feature -->
</div>

All lessons in this course

← Back to Tailwind CSS Academy