Home
Sophia Baker
Features grid

Features grid

This tailwind example is contributed by Sophia Baker, on 20-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us

Card Feature showcase Grid

Author Sophia Baker

9.2k

Fork Fullscreen

<h4 class="text-xl font-bold text-gray-700 capitalize dark:text-gray-300 md:text-3xl text-center">⚒️ More Tools 🛠️</h4>
    <p class="text-center dark:text-gray-400">Tools that will help you get things done in less time.</p>

<a href="/">
                    <div
                        class="object-cover object-center w-full h-48 mx-auto rounded-lg bg-blue-100 border-4 border-blue-200 dark:bg-gray-900 dark:border-gray-600">
                        <div class="py-16 px-4">
                            <h5 class="text-lg font-bold t dark:text-white">Open Bulk URL</h5>
                            <span class="mt-1 font-medium dark:text-gray-400">In new tab/windows</span>
                        </div>
                    </div>
                </a>
            </div>

<div class="w-full max-w-xs text-center">
                <a href="">
                    <div
                        class="object-cover object-center w-full h-48 mx-auto rounded-lg bg-blue-100 border-4 border-blue-200 dark:bg-gray-900 dark:border-gray-600">
                        <div class="py-16 px-4">
                            <h5 class="text-lg font-bold dark:text-white">Random Websites</h5>
                            <span class="mt-1 font-medium dark:text-gray-400">Random but Useful websites
                                    collection</span>

</div>
                    </div>
                </a>
            </div>

<div class="w-full max-w-xs text-center">
                <a href="">
                    <div
                        class="object-cover object-center w-full h-48 mx-auto rounded-lg bg-blue-100 border-4 border-blue-200 dark:bg-gray-900 dark:border-gray-600">
                        <div class="py-16 px-4">
                            <h5 class="text-lg font-bold dark:text-white">Extract URL from text</h5>
                            <span class="mt-1 font-medium dark:text-gray-400">Easily extract URL in Bulk</span>
                        </div>
                    </div>
                </a>
            </div>

<div class="w-full max-w-xs text-center">
                <a href="">
                    <div
                        class="object-cover object-center w-full h-48 mx-auto rounded-lg bg-blue-100 border-4 border-blue-200 dark:bg-gray-900 dark:border-gray-600">
                        <div class="py-16 px-4">
                            <h5 class="text-lg font-bold dark:text-white">Auto Reload Websites</h5>
                            <span class="mt-1 font-medium dark:text-gray-400">Useful websites collection</span>
                        </div>
                    </div>
                </a>
            </div>

<div class="w-full max-w-xs text-center">
                <a href="#">
                    <div
                        class="object-cover object-center w-full h-48 mx-auto rounded-lg bg-gray-100 border-4 border-gray-200 dark:bg-gray-900 dark:border-gray-600">
                        <div class="py-16 px-4">
                            <h5 class="text-lg font-bold dark:text-white">Coming Soon</h5>
                            <span class="mt-1 font-medium dark:text-gray-400">More tools</span>
                        </div>
                    </div>
                </a>
            </div>

</div>
    </div>
</section>

Related Examples

Responsive Card Grid with hover animation

Author:
Prashant

2 years ago

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

48.2k
Feature cards with icons on top

Author:
Manon Daniel

1 year ago

14.6k
Video card
Video card component for tailwind css

Author:
Rajesh kulkarni

2 years ago

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

Author:
Alok

2 years ago

21.6k
Feature showcase cards

Author:
Lukas Müller

2 years ago

12.6k
Feature cards

Author:
Fagundo67

2 years ago

10.3k
Feature tiles

Author:
Nishant Trivedi

1 year ago

12.5k
Images grid
Responsive image grid with tailwindcss.

Author:
Sienna

2 years ago

17.2k
Features section
Showcase your key features

Author:
Manon Daniel

2 years ago

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

Author:
Arya

2 years ago

39.9k
Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

14.3k
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

24.6k
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

Author:
R Thapa

1 year ago

9.6k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

21.7k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

2 years ago

13.9k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

Author:
threehymns

1 year ago

16.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components