Card grid for showing features

This tailwind example is contributed by Steven Kuhn, on 25-Nov-2022. Component is made with Tailwind v3.4. It is responsive.

Grid

Author Steven Kuhn

Tailwind v3.4 11.6k 16

Fork Fullscreen

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-10 p-10">
    <div class="flex border border-gray-500 rounded-lg p-4 bg-white"><svg xmlns="http://www.w3.org/2000/svg"
            class="text-green-500 flex-shrink-0" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M5 12l5 5l10 -10"></path>
        </svg>
        <div class="ml-2">
            <h4 class="font-semibold text-base text-primary tracking-normal">Proof of work</h4>
            <p class="text-sm font-normal text-gray tracking-normal">No guess-work. Hire based on proof-of-work!</p>
        </div>
    </div>
    <div class="flex border border-gray-500 rounded-lg p-4 bg-white"><svg xmlns="http://www.w3.org/2000/svg"
            class="text-green-500 flex-shrink-0" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M5 12l5 5l10 -10"></path>
        </svg>
        <div class="ml-2">
            <h4 class="font-semibold text-base text-primary tracking-normal">Resume</h4>
            <p class="text-sm font-normal text-gray tracking-normal">Check qualifications, resumé and verified work
                experience.</p>
        </div>
    </div>
    <div class="flex border border-gray-500 rounded-lg p-4 bg-white"><svg xmlns="http://www.w3.org/2000/svg"
            class="text-green-500 flex-shrink-0" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M5 12l5 5l10 -10"></path>
        </svg>
        <div class="ml-2">
            <h4 class="font-semibold text-base text-primary tracking-normal">Unique Candidate Details</h4>
            <p class="text-sm font-normal text-gray tracking-normal">Know if candidate is holding any offer, notice
                period and much more.</p>
        </div>
    </div>
    <div class="flex border border-gray-500 rounded-lg p-4 bg-white"><svg xmlns="http://www.w3.org/2000/svg"
            class="text-green-500 flex-shrink-0" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M5 12l5 5l10 -10"></path>
        </svg>
        <div class="ml-2">
            <h4 class="font-semibold text-base text-primary tracking-normal">ATS Integrations</h4>
            <p class="text-sm font-normal text-gray tracking-normal">Integrate with your existing ATS to import job
                posts automatically.</p>
        </div>
    </div>
</div>

Related Examples

Features section
Showcase your key features

Manon Daniel

3 years ago

17.6k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.9k
Tailwind image gallery
Responsive grid with evenly spaced image cards. Each card has a title label at the bottom, and there's a subtle hover effect for interactive engagement.

Alok

3 years ago

62.5k
Simple Features section

Odessa Young

3 years ago

17.8k
Clean Image Grid Gallery
A clean and balanced image gallery arranged in equal-sized columns for a simple, organized presentation.

JUGENDRA GANGWAR

3 months ago

283
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Muhammad Umair Arshad

1 year ago

1.5k
Feature display cards (grid layout)

Ronald Otieno

2 years ago

3.6k
Product features cards

Henrik R.

2 years ago

4.9k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

kzsamir849

2 years ago

2.7k
Logo grid

ariaw

1 year ago

1k
Grid (2x3)

Maxim

1 year ago

1.5k
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

ABDO-SY

1 year ago

3.3k