Features grid

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

Card Feature showcase Grid

Author Sophia Baker

Tailwind v3.4 10.8k 17

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

Prashant

4 years ago

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

Amit Pachange

4 years ago

53.6k
Feature cards with icons on top

Manon Daniel

3 years ago

18.2k
Video card
Video card component for tailwind css

Rajesh kulkarni

3 years ago

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

Alok

3 years ago

26.7k
Feature showcase cards

Lukas Müller

3 years ago

14.8k
Feature tiles

Nishant Trivedi

3 years ago

15.2k
Feature cards

Fagundo67

3 years ago

11.5k
Images grid
Responsive image grid with tailwindcss.

Sienna

3 years ago

20k
Features section
Showcase your key features

Manon Daniel

3 years ago

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

Arya

3 years ago

46.1k
Feature display cards (grid layout)

Sophia Baker

3 years ago

15.9k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

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

R Thapa

2 years ago

11.8k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

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

threehymns

2 years ago

20.1k