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

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.5k
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.9k
Simple Features section

Author:
Odessa Young

2 years ago

16.6k
Basic responsive card grid
supports dark mode

Author:
Samuel Dawson

2 years ago

11.5k
Feature cards

Author:
Fagundo67

2 years ago

10.7k
Service section

Author:
inbarajan P

1 year ago

1.6k
Responsive grid layout

Author:
Kofi Osei

2 years ago

21.7k
Info cards grid with icons
Evenly-sized cards for showing various stats on the user/admin dashboard.

Author:
Prajwal Hallale

2 years ago

7.8k
Feature Highlights cards

Author:
Carla Hoffman

1 year ago

2.4k
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

3 years ago

23.4k
Tailwind Flex Component: Responsive Testimonial Section UI
A clean, modern, and fully responsive Testimonial Section built using Tailwind CSS and Flexbox. Ideal for portfolios, agency websites, SaaS landing pages, or any modern UI project. This reusable component includes user images, job titles, and quotes—perfect for showcasing feedback and adding trust to your UI.

Author:
Muhammad Umair Arshad

5 months ago

701

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components