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

11.1k

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

3 years ago

16.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.

Author:
Amit Pachange

3 years ago

52.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

3 years ago

60.9k
Simple Features section

Author:
Odessa Young

2 years ago

16.9k
Articles Card Grid

Author:
Noob

3 years ago

11.1k
Blog items skeleton

Author:
Nii Anyetei

1 year ago

2.5k
Tailwind responsive card grid

Author:
Piet Vriend

3 years ago

11.1k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

9 months ago

1.4k
Responsive grid layout

Author:
gmer33

2 years ago

13.3k
Product grid

Author:
ariaw

3 months ago

417
Tweets showcase grid
Responsive tweets showcase grid

Author:
Freja Jensen

3 years ago

11.1k
Logo grid

Author:
ariaw

3 months ago

344

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components