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

12.2k

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

3 years ago

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

2 years ago

11.8k
Responsive card grid

Author:
TailwindFlex

3 years ago

10.6k
Tweets showcase grid
Responsive tweets showcase grid

Author:
Freja Jensen

3 years ago

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

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

Author:
Noob

3 years ago

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

3 years ago

61.1k
Tailwind responsive card grid

Author:
Piet Vriend

3 years ago

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

Author:
Alok

3 years ago

25.8k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

10 months ago

771
Customer testimonies grid

Author:
Sameer Sultana

2 years ago

20.5k
Animated Feature Grid Component with Tailwind CSS
Animated feature grid component built with Tailwind CSS. Features smooth hover animations, gradient cards, dark mode support, and responsive design. Perfect for showcasing product features.

Author:
Homayoun

2 months ago

411

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components