Home
TailwindFlex
Responsive Card Grid with images

Responsive Card Grid with images

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

Grid

Author TailwindFlex

19.8k

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.

Author:
Arya

3 years ago

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

60.6k
Card grid for posts

Author:
Mr Robot

2 years ago

22.6k
Masonry Grid
Auto-adjusting masonry grid

Author:
Simon Scheffer

2 years ago

31.8k
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

29.1k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

3 years ago

13.7k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

24k
Tailwind responsive card grid

Author:
Piet Vriend

2 years ago

11k
Responsive Article Section

Author:
Prashant

3 years ago

16.4k
Feature showcase cards

Author:
Lukas Müller

2 years ago

14k
Responsive card grid
Responsive card grid for posts section

Author:
Mr Robot

2 years ago

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

Author:
Arya

3 years ago

14.8k
Articles Card Grid

Author:
Noob

3 years ago

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

Author:
R Thapa

2 years ago

14.3k
Tweets showcase grid
Responsive tweets showcase grid

Author:
Freja Jensen

2 years ago

11.1k
Responsive grid layout

Author:
Kofi Osei

2 years ago

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

Author:
Sienna

2 years ago

19k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components