Home
Leon Bachmann
Card grid

Card grid

This tailwind example is contributed by Leon Bachmann, on 17-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Grid

Author Leon Bachmann

11.6k

Fork Fullscreen

<div class="p-5 pt-8 border ignore border-gray-200 not-prose dark:border-gray-800 relative bg-gray-50 dark:bg-gray-800">
    <div
        class="absolute w-auto rounded-b-lg border-b uppercase -translate-y-px tracking-wide leading-none border-l border-r border-gray-200 dark:border-gray-800 shadow-sm top-0 left-1/2 -translate-x-1/2 px-3 pt-1 pb-2 bg-white dark:bg-black text-gray-400 text-[0.65rem]">
        🤩 Our Amazing Sponsors 👇</div>
    <div class="max-w-5xl mx-auto">
        <div class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3  gap-3 sm:gap-5 not-prose">
            <a href="#" target="_blank"
                class="relative flex flex-col items-start justify-between p-6 overflow-hidden rounded-xl border border-gray-200 dark:border-gray-800 dark:bg-black bg-white group">
                <span class="absolute w-full h-full bg-white dark:bg-black inset-0 dark:group-hover:bg-gray-900 group-hover:bg-gray-50 group-hover:bg-opacity-30"></span>
                <div class="flex items-center justify-between w-full mb-4 ">
                    <img src="https://cdn.devdojo.com/sponsors/digital-ocean.svg" alt="DigitalOcean" class="relative h-5 md:h-6">
                    <span class="opacity-0 -translate-x-2 flex-shrink-0 group-hover:translate-x-0 py-1 px-2.5 text-[0.6rem] group-hover:opacity-100 transition-all ease-out duration-200 rounded-full bg-blue-50 dark:bg-blue-500 dark:text-white text-blue-500 flex items-center justify-center">
                        <span>View Website</span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                        class="w-3 translate-x-0.5 h-3">
                        <path fill-rule="evenodd"
                            d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                            clip-rule="evenodd"></path>
                    </svg>
                    </span>
                </div>
                <span class="relative text-xs md:text-sm text-gray-600 dark:text-gray-400">DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.</span>
            </a>
            <a href="#" target="_blank"
                class="relative flex flex-col items-start justify-between p-6 overflow-hidden rounded-xl border border-gray-200 dark:border-gray-800 dark:bg-black bg-white group">
                <span class="absolute w-full h-full bg-white dark:bg-black inset-0 dark:group-hover:bg-gray-900 group-hover:bg-gray-50 group-hover:bg-opacity-30"></span>
                <div class="flex items-center justify-between w-full mb-4 ">
                    <img src="https://cdn.devdojo.com/sponsors/larajobs.svg" alt="Larajobs" class="relative h-5 md:h-6">
                    <span class="opacity-0 -translate-x-2 flex-shrink-0 group-hover:translate-x-0 py-1 px-2.5 text-[0.6rem] group-hover:opacity-100 transition-all ease-out duration-200 rounded-full bg-blue-50 dark:bg-blue-500 dark:text-white text-blue-500 flex items-center justify-center">
                        <span>View Website</span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                        class="w-3 translate-x-0.5 h-3">
                        <path fill-rule="evenodd"
                            d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                            clip-rule="evenodd"></path>
                    </svg>
                    </span>
                </div>
                <span class="relative text-xs md:text-sm text-gray-600 dark:text-gray-400">The official Laravel job board. Find the best and most talented Laravel developers by posting your job on the official Laravel job board.</span>
            </a>
            <a href="#" target="_blank"
                class="relative flex flex-col items-start justify-between p-6 overflow-hidden rounded-xl border border-gray-200 dark:border-gray-800 dark:bg-black bg-white group">
                <span class="absolute w-full h-full bg-white dark:bg-black inset-0 dark:group-hover:bg-gray-900 group-hover:bg-gray-50 group-hover:bg-opacity-30"></span>
                <div class="flex items-center justify-between w-full mb-4 ">
                    <img src="https://cdn.devdojo.com/sponsors/coin-camp.svg" alt="CoinCamp" class="relative h-5 md:h-6">
                    <span class="opacity-0 -translate-x-2 flex-shrink-0 group-hover:translate-x-0 py-1 px-2.5 text-[0.6rem] group-hover:opacity-100 transition-all ease-out duration-200 rounded-full bg-blue-50 dark:bg-blue-500 dark:text-white text-blue-500 flex items-center justify-center">
                        <span>View Website</span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                        class="w-3 translate-x-0.5 h-3">
                        <path fill-rule="evenodd"
                            d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                            clip-rule="evenodd"></path>
                    </svg>
                    </span>
                </div>
                <span class="relative text-xs md:text-sm text-gray-600 dark:text-gray-400">Learn how to code your own blockchain and create your own crypto-currency with the CoinCamp interactive and fun online training platform.</span>
            </a>
        </div>
    </div>
</div>

Related Examples

Feature showcase cards

Author:
Lukas Müller

2 years ago

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

Author:
Computer guy

1 year ago

10.9k
Responsive card grid

Author:
TailwindFlex

2 years ago

9.9k
Tweets showcase grid
Responsive tweets showcase grid

Author:
Freja Jensen

2 years ago

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

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

Author:
Noob

2 years ago

22.6k
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.

Author:
Alok

2 years ago

58.3k
Tailwind responsive card grid

Author:
Piet Vriend

2 years ago

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

Author:
Alok

2 years ago

23.6k
Responsive Light Mode Footer Component
This is a fully responsive and reusable light-mode footer component designed by ABNahid Agency. Built with a clean structure and optimized for modern web applications, this footer features essential sections, including About, Services, Contact, and Social Links. Ideal for personal portfolios, business websites, or startup platforms—plug and play in your React or HTML project.

Author:
Abdul Jabbar Al Nahid

1 day ago

8
Tailwind product gallery

Author:
JaxStone

2 years ago

26.1k
Information cards for admin panal
Stats cards

Author:
Brandon D

2 years ago

10.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components