cardfeaturebeginner

Feature Card

A clean feature card with an icon, title, and description for feature grid sections.

Preview

Lightning Fast

Optimized for performance with lazy loading and code splitting built in.

<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow max-w-xs">
  <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="text-lg font-semibold text-gray-900 mb-2">Lightning Fast</h3>
  <p class="text-gray-500 text-sm leading-relaxed">Optimized for performance with lazy loading and code splitting built in.</p>
</div>

Color Breakdown

Card Background

bg-white

#ffffff

Icon Background

bg-blue-100

#dbeafe

Icon

text-blue-600

#2563eb

Title

text-gray-900

#111827

Description

text-gray-500

#6b7280

Dark Mode Variant

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

dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:text-gray-400

Use Cases

Feature grid sectionsService listing pagesProduct benefit lists

Browser Support

All modern browsers.

Related Recipes

Icon Button

button - beginner

Glassmorphism Card

card - intermediate

Neumorphism Card

card - intermediate

Gradient Border Card

card - advanced

Image Overlay Card

card - intermediate

Pricing Card

card - intermediate

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 create a responsive feature grid?▼

Wrap multiple cards in a div with grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6.