Responsive Card Grid with images

This tailwind example is contributed by TailwindFlex, on 06-Sep-2022. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Grid

Author TailwindFlex

Tailwind v3.4 20.9k 20

Fork Fullscreen

<p class="antialiased text-gray-600 dark:text-gray-400 text-sm break-all">
                        A card component 
                    </p>
                </div>
            </div>

</div>

<p class="antialiased text-gray-600 dark:text-gray-400 text-sm break-all">
                        description
                    </p>
                </div>
            </div>
        </div>

<div class="px-4 pb-3">
                <div>
                    <a href="#">
                        <h5
                            class="text-xl font-semibold tracking-tight hover:text-violet-800 dark:hover:text-violet-300 text-gray-900 dark:text-white ">
                            Button
                        </h5>
                    </a>
                    <p class="antialiased text-gray-600 dark:text-gray-400 text-sm break-all">
                        description
                    </p>
                </div>
            </div>
        </div>

<div
            class="relative bg-white border rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 transform transition duration-500 hover:scale-105">

<p class="antialiased text-gray-600 dark:text-gray-400 text-sm break-all">
                        description
                    </p>

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

<p class="antialiased text-gray-600 dark:text-gray-400 text-sm break-all">
                        description
                    </p>
                </div>
            </div>
        </div>

<div
            class="relative bg-white border rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 transform transition duration-500 hover:scale-105">
            <div class="absolute top-3 right-3 rounded-full bg-violet-600 text-gray-200  w-6 h-6 text-center">
                9
            </div>
            <div class="p-2 flex justify-center">
                <a href="#">
                    <img class="rounded-md"
                    src="https://tailwindflex.com/public/images/thumbnails/mango-gradient/canvas.min.webp"
                    loading="lazy">
                </a>
            </div>
            <div class="px-4 pb-3">
                <div>
                    <a href="#">
                        <h5
                            class="text-xl font-semibold tracking-tight hover:text-violet-800 dark:hover:text-violet-300 text-gray-900 dark:text-white ">
                            Gradient
                        </h5>
                    </a>

<p class="antialiased text-gray-600 dark:text-gray-400 text-sm break-all">
                        description
                    </p>
                </div>
            </div>
        </div>

<div
            class="relative bg-white border rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 transform transition duration-500 hover:scale-105">

<div class="px-4 pb-3">
                <div>
                    <a href="https://tailwindflex.com/tag/badge">
                        <h5
                            class="text-xl font-semibold tracking-tight hover:text-violet-800 dark:hover:text-violet-300 text-gray-900 dark:text-white ">
                            Badge
                        </h5>
                    </a>
                    <p class="antialiased text-gray-600 dark:text-gray-400 text-sm break-all">
                        description
                    </p>
                </div>
            </div>
        </div>

<p class="antialiased text-gray-600 dark:text-gray-400 text-sm break-all">
                        description
                    </p>
                </div>
            </div>

</div>

<div class="px-4 pb-3">
                <div>
                    <a href="#">
                        <h5
                            class="text-xl font-semibold tracking-tight hover:text-violet-800 dark:hover:text-violet-300 text-gray-900 dark:text-white ">
                            Feature
                        </h5>
                    </a>
                    <p class="antialiased text-gray-600 dark:text-gray-400 text-sm break-all">
                        description
                    </p>
                </div>
            </div>
        </div>

<div class="px-4 pb-3">
                <div>
                    <a href="https://tailwindflex.com/tag/call-to-action">
                        <h5
                            class="text-xl font-semibold tracking-tight hover:text-violet-800 dark:hover:text-violet-300 text-gray-900 dark:text-white ">
                            Call to Action
                        </h5>
                    </a>
                    <p class="antialiased text-gray-600 dark:text-gray-400 text-sm break-all">
                        description
                    </p>
                </div>
            </div>
        </div>

<p class="antialiased text-gray-600 dark:text-gray-400 text-sm break-all">
                        description
                    </p>
                </div>
            </div>
        </div>

<div class="px-4 pb-3">
                <div>
                    <a href="#">
                        <h5
                            class="text-xl font-semibold tracking-tight hover:text-violet-800 dark:hover:text-violet-300 text-gray-900 dark:text-white ">
                            Login
                        </h5>
                    </a>
                    <p class="antialiased text-gray-600 dark:text-gray-400 text-sm break-all">
                        description
                    </p>
                </div>
            </div>
        </div>

</div>

Related Examples

Responsive products grid
Responsive product card grid using tailwind CSS.

Arya

3 years ago

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

Alok

3 years ago

62.3k
Card grid for posts

Mr Robot

3 years ago

24.1k
Masonry Grid
Auto-adjusting masonry grid

Simon Scheffer

3 years ago

32.8k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.2k
Verticle card grid
Best suited for news websites

Mr Robot

3 years ago

14.3k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Tailwind responsive card grid

Piet Vriend

3 years ago

11.9k
Responsive Article Section

Prashant

4 years ago

17.2k
Feature showcase cards

Lukas Müller

3 years ago

14.8k
Responsive card grid
Responsive card grid for posts section

Mr Robot

3 years ago

12k
Feature / Icon grid
Present information in a clear and organized manner with icons.

Arya

3 years ago

15.5k
Articles Card Grid

Noob

4 years ago

11.8k
Image Grid
The layout is designed to showcase various categories or items using images and descriptive text. Each grid item features a high-quality image and a centered text overlay with a semi-transparent background

R Thapa

2 years ago

15.4k
Tweets showcase grid
Responsive tweets showcase grid

Freja Jensen

3 years ago

11.5k
Responsive grid layout

Kofi Osei

3 years ago

22.9k
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
Images grid
Responsive image grid with tailwindcss.

Sienna

3 years ago

20k