sectionfeature-gridbeginner

Feature Grid Section

A responsive 3-column feature grid with icon cards, perfect for showcasing product benefits.

Preview

Why Choose Us

Everything you need to build modern web applications.

Lightning Fast

Optimized build times and instant hot reloading.

Reliable

99.9% uptime with automated failover.

Secure

Enterprise-grade security with end-to-end encryption.

<section class="bg-gray-50 py-20 px-4">
  <div class="max-w-6xl mx-auto text-center mb-12">
    <h2 class="text-3xl font-bold text-gray-900 mb-4">Why Choose Us</h2>
    <p class="text-gray-600 max-w-2xl mx-auto">Everything you need to build modern web applications.</p>
  </div>
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <div class="bg-white rounded-xl p-6 shadow-sm">
      <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4"><svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg></div>
      <h3 class="font-semibold text-gray-900 mb-2">Lightning Fast</h3>
      <p class="text-sm text-gray-500">Optimized build times and instant hot reloading.</p>
    </div>
    <div class="bg-white rounded-xl p-6 shadow-sm">
      <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4"><svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div>
      <h3 class="font-semibold text-gray-900 mb-2">Reliable</h3>
      <p class="text-sm text-gray-500">99.9% uptime with automated failover.</p>
    </div>
    <div class="bg-white rounded-xl p-6 shadow-sm">
      <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"><svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg></div>
      <h3 class="font-semibold text-gray-900 mb-2">Secure</h3>
      <p class="text-sm text-gray-500">Enterprise-grade security with end-to-end encryption.</p>
    </div>
  </div>
</section>

Color Breakdown

Section Background

bg-gray-50

#f9fafb

Card Background

bg-white

#ffffff

Icon BG Blue

bg-blue-100

#dbeafe

Icon Blue

text-blue-600

#2563eb

Icon BG Green

bg-green-100

#dcfce7

Icon Green

text-green-600

#16a34a

Icon BG Purple

bg-purple-100

#f3e8ff

Title

text-gray-900

#111827

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-gray-900 dark:text-white

Use Cases

Product feature showcaseService benefit listsPlatform capabilities

Browser Support

All modern browsers.

Related Recipes

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I add more features?
Add more card divs to the grid. The responsive classes will automatically reflow them.