Home
Steven Kuhn
Card grid for showing features

Card grid for showing features

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

Grid

Author Steven Kuhn

11k

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

Author:
Manon Daniel

2 years ago

16.4k
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.

Author:
Amit Pachange

3 years ago

51.7k
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.

Author:
Alok

2 years ago

60.3k
Simple Features section

Author:
Odessa Young

2 years ago

16.8k
Company icons grid

Author:
Amit Pachange

2 years ago

12.9k
Information cards for admin panal
Stats cards

Author:
Brandon D

2 years ago

10.6k
Feature Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Author:
Alok

3 years ago

25.1k
Tailwind image grid
tailwind picture grid

Author:
Anonymous

1 year ago

10k
Grid (2x3)

Author:
Maxim

7 months ago

892
Featured Items

Author:
Abdul Baset Bappy

5 months ago

609
Feature Highlights cards

Author:
Carla Hoffman

1 year ago

2.5k
Card KPI
Targetas

Author:
Raul antonio de la cruz hernandez

1 week ago

18

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components