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

10.8k

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

59.1k
Simple Features section

Author:
Odessa Young

2 years ago

16.3k
Blog post showcase minimal
a grid showcasing the blog posts with images and title

Author:
Henrik R.

1 year ago

3.1k
Modern Contact Section with Responsive Grid and Glassmorphic Form
A clean, professional contact section with a dual-column layout featuring contact details and a sleek glassmorphism-inspired form. Fully responsive with Tailwind CSS, supporting both light and dark modes.

Author:
Muhammad Umair Arshad

1 month ago

113
Galerie de produits Gis et Affiche Tailwind

Author:
kouassi ange anisco

6 months ago

515
Responsive Grid with Featured image

Author:
_Amar_

3 years ago

12.2k
Brand Grid with Hover Effect

Author:
ariaw

5 months ago

887
Post Responsive Grid
Laravel News post grid

Author:
Mr Robot

3 years ago

12.3k
Responsive data cards

Author:
EliteAI Tools

8 months ago

1.4k
Data Metrics Showcase
An information panel designed to instill trust, presenting vital statistics about a service or product. The grid layout offers a clean and organized look for displaying key data.

Author:
Hyun-woo Cho

1 year ago

8.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components