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

10k

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

3 years ago

19.2k
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.4k
Feature cards with icons on top

Author:
Manon Daniel

2 years ago

16.6k
Video card
Video card component for tailwind css

Author:
Rajesh kulkarni

2 years ago

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

Author:
Alok

3 years ago

24.6k
Feature showcase cards

Author:
Lukas Müller

2 years ago

13.7k
Feature tiles

Author:
Nishant Trivedi

2 years ago

13.9k
Feature cards

Author:
Fagundo67

2 years ago

10.7k
Images grid
Responsive image grid with tailwindcss.

Author:
Sienna

2 years ago

18.7k
Features section
Showcase your key features

Author:
Manon Daniel

2 years ago

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

Author:
Arya

2 years ago

43.6k
Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

15.2k
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

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

Author:
R Thapa

2 years ago

10.6k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

23.7k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

2 years ago

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

2 years ago

18.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components