Home
Gopi Yadav
Responsive Feature Card

Responsive Feature Card

This tailwind example is contributed by Gopi Yadav, on 12-Sep-2022. Component is made with Tailwind CSS v3. similar terms for this example are Services,Why choose us

Card Feature showcase Grid

Author Gopi Yadav

11.9k

10

Fork Fullscreen

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-4 md:p-12 w-full p-4">
	<div class="p-6 bg-gray-100">
		<p class="text-center text-4xl">
			😁
		</p>

<h2 class="font-semibold text-lg text-center text-gray-800 mt-2">
			Your Feature Here
		</h2>

<p class="mt-2 text-gray-800 text-center">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias excepturi fuga, laudantium molestias
			nesciunt tempore.
		</p>
	</div>
	<div class="p-6 bg-gray-100">
		<p class="text-center text-4xl">
			🤩
		</p>

<h2 class="font-semibold text-lg text-center text-gray-800 mt-2">
			Your Feature Here
		</h2>

<p class="mt-2 text-gray-800 text-center">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias excepturi fuga, laudantium molestias
			nesciunt tempore.
		</p>
	</div>
	<div class="p-6 bg-gray-100">
		<p class="text-center text-4xl">
			😎
		</p>

<h2 class="font-semibold text-lg text-center text-gray-800 mt-2">
			Your Feature Here
		</h2>

<p class="mt-2 text-gray-800 text-center">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias excepturi fuga, laudantium molestias
			nesciunt tempore.
		</p>
	</div>
	<div class="p-6 bg-gray-100">
		<p class="text-center text-4xl">
			🥰
		</p>

<h2 class="font-semibold text-lg text-center text-gray-800 mt-2">
			Your Feature Here
		</h2>

<p class="mt-2 text-gray-800 text-center">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias excepturi fuga, laudantium molestias
			nesciunt tempore.
		</p>
	</div>
</div>

Related Examples

Feature tiles

Author:
Nishant Trivedi

1 year ago

11.3k
Feature cards with icons on top

Author:
Manon Daniel

1 year ago

13k
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

2 years ago

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

Author:
Alok

2 years ago

19.2k
Feature showcase cards

Author:
Lukas Müller

1 year ago

11.6k
Card grid section
Display article/blog grid

Author:
Mr Robot

1 year ago

21.9k
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

1 year ago

8.4k
Feature cards

Author:
Fagundo67

1 year ago

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

Author:
Noob

2 years ago

19.1k
Feature display cards (grid layout)

Author:
Sophia Baker

1 year ago

13.2k
Responsive Card Grid with hover animation

Author:
Prashant

2 years ago

16.8k
Work Showcase Cards
Highlight your top projects or products with these cards, featuring images and brief descriptions. This example has a subtle hover effect.

Author:
Computer guy

1 year ago

9.2k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

1 year ago

19.5k
Responsive Grid with Featured image

Author:
_Amar_

2 years ago

10.8k
Features section
Showcase your key features

Author:
Manon Daniel

1 year ago

13.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.9