Feature / Icon grid

Present information in a clear and organized manner with icons.

This tailwind example is contributed by Arya, on 27-Dec-2022. Component is made with Tailwind v3.4. It is responsive.

Grid

Author Arya

Tailwind v3.4 15.5k 21

Fork Fullscreen

<p class="pt-4 text-sm font-medium capitalize font-body text-green-900 lg:text-lg md:text-base md:pt-6">
                    portfolio
                </p>
            </div>
        </a>

<p class="pt-4 text-sm font-medium capitalize font-body text-green-900 lg:text-lg md:text-base md:pt-6">
                    ecommerce
                </p>
            </div>
        </a>

<p class="pt-4 text-sm font-medium capitalize font-body text-green-900 lg:text-lg md:text-base md:pt-6">
                    startup
                </p>
            </div>
        </a>

<p class="pt-4 text-sm font-medium capitalize font-body text-green-900 lg:text-lg md:text-base md:pt-6">
                    business
                </p>
            </div>
        </a>

<p class="pt-4 text-sm font-medium capitalize font-body text-green-900 lg:text-lg md:text-base md:pt-6">
                    lifestyle
                </p>
            </div>
        </a>

<p class="pt-4 text-sm font-medium capitalize font-body text-green-900 lg:text-lg md:text-base md:pt-6">
                    landing pages
                </p>
            </div>
        </a>

<p class="pt-4 text-sm font-medium capitalize font-body text-green-900 lg:text-lg md:text-base md:pt-6">
                    health
                </p>
            </div>
        </a>

</div>

Related Examples

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

Noob

4 years ago

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

Computer guy

3 years ago

13.4k
Feature showcase cards

Lukas Müller

3 years ago

14.9k
Tailwind product gallery

JaxStone

3 years ago

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

Alok

4 years ago

26.8k
Responsive grid layout

Kofi Osei

3 years ago

22.9k
Responsive Card Grid with images

TailwindFlex

4 years ago

21.1k
Images grid
Responsive image grid with tailwindcss.

Sienna

3 years ago

20.1k
Responsive products grid
Responsive product card grid using tailwind CSS.

Arya

4 years ago

46.3k
Responsive cards layout

Piet Vriend

3 years ago

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

Alok

3 years ago

62.4k
Responsive Article Section

Prashant

4 years ago

17.3k
Process Steps Grid
A structured way to present information about each step, along with corresponding icons and descriptions. Each step card is designed with a hover effect.

Computer guy

3 years ago

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

Amit Pachange

4 years ago

53.9k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.2k
Masonry Grid
Auto-adjusting masonry grid

Simon Scheffer

3 years ago

33k
Tweets showcase grid
Responsive tweets showcase grid

Freja Jensen

3 years ago

11.5k
Tailwind products list

Isabella Kowalski

3 years ago

14.7k