cards

group of cards

This tailwind example is contributed by TakaMorY, on 10-Aug-2025. Component is made with Tailwind v3.4. It is responsive.

Card

Author TakaMorY

Tailwind v3.4 1.1k 2

Fork Fullscreen

<section class="py-48 pt-72 bg-black" id="services">
                <div class="container mx-auto px-4">
                    <h2 class="text-5xl font-bold text-white mb-12 text-center">Lorem Ipsum</h2>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                        
                        <div class="bg-white rounded-lg shadow-md overflow-hidden">
                            <NuxtLink to="/" class="relative group">
                                <img src="" alt="Lorem Ipsum"
                                    class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
                                
                                <div
                                    class="absolute top-3 right-3 w-8 h-8 bg-black rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white"
                                        viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
                                            clip-rule="evenodd" transform="rotate(-45 10 10)" />
                                    </svg>
                                </div>
                            </NuxtLink>
                            <div class="p-6 text-center">
                                <h3 class="text-xl font-medium text-gray-800 mb-2">Lorem Ipsum</h3>
                                <p class="text-gray-700 text-base">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
                            </div>
                        </div>

<div class="bg-white rounded-lg shadow-md overflow-hidden">
                            <NuxtLink to="/" class="relative group">
                                <img src="" alt="Lorem Ipsum"
                                    class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
                                
                                <div
                                    class="absolute top-3 right-3 w-8 h-8 bg-black rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white"
                                        viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
                                            clip-rule="evenodd" transform="rotate(-45 10 10)" />
                                    </svg>
                                </div>
                            </NuxtLink>
                            <div class="p-6 text-center">
                                <h3 class="text-xl font-medium text-gray-800 mb-2">Lorem Ipsum</h3>
                                <p class="text-gray-700 text-base">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
                            </div>
                        </div>

<div class="bg-white rounded-lg shadow-md overflow-hidden">
                            <NuxtLink to="" class="relative group">
                                <img src="" alt="Lorem Ipsum"
                                    class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
                                
                                <div
                                    class="absolute top-3 right-3 w-8 h-8 bg-black rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white"
                                        viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
                                            clip-rule="evenodd" transform="rotate(-45 10 10)" />
                                    </svg>
                                </div>
                            </NuxtLink>
                            <div class="p-6 text-center">
                                <h3 class="text-xl font-medium text-gray-800 mb-2">Lorem Ipsum</h3>
                                <p class="text-gray-700 text-base">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit....
                                </p>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg shadow-md overflow-hidden">
                            <NuxtLink to="/" class="relative group">
                                <img src="" alt="Lorem Ipsum"
                                    class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
                                
                                <div
                                    class="absolute top-3 right-3 w-8 h-8 bg-black rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white"
                                        viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
                                            clip-rule="evenodd" transform="rotate(-45 10 10)" />
                                    </svg>
                                </div>
                            </NuxtLink>
                            <div class="p-6 text-center">
                                <h3 class="text-xl font-medium text-gray-800 mb-2">Lorem Ipsum</h3>
                                <p class="text-gray-700 text-base">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
                                    уровня.</p>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg shadow-md overflow-hidden">
                            <NuxtLink to="/" class="relative group">
                                <img src="" alt="Lorem Ipsum"
                                    class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
                                
                                <div
                                    class="absolute top-3 right-3 w-8 h-8 bg-black rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white"
                                        viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
                                            clip-rule="evenodd" transform="rotate(-45 10 10)" />
                                    </svg>
                                </div>
                            </NuxtLink>
                            <div class="p-6 text-center">
                                <h3 class="text-xl font-medium text-gray-800 mb-2">Lorem Ipsum</h3>
                                <p class="text-gray-700 text-base">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg shadow-md overflow-hidden">
                            <NuxtLink to="/" class="relative group">
                                <img src="" alt="Lorem Ipsum"
                                    class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
                                
                                <div
                                    class="absolute top-3 right-3 w-8 h-8 bg-black rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white"
                                        viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
                                            clip-rule="evenodd" transform="rotate(-45 10 10)" />
                                    </svg>
                                </div>
                            </NuxtLink>
                            <div class="p-6 text-center">
                                <h3 class="text-xl font-medium text-gray-800 mb-2">Прохождение Хельхейма</h3>
                                <p class="text-gray-700 text-base">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
                            </div>
                        </div>

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

Related Examples

Clean Architectural Blog & News Section Grid
A sleek, modern, and minimal blog section designed for architecture, portfolio, or agency websites. Features landscape card layouts, top-aligned post titles for consistent grid alignment, category badges, publication dates with icons, and a smooth outlined CTA button.

Alief Malik

1 month ago

78
Coupon code card
Display Special Offer with Coupon Code

Dipti narayan

3 years ago

11.6k
Modern Retail Analytics Dashboard UI with Interactive Charts
Dashboard built with HTML, Tailwind CSS, and vanilla JavaScript.

JUGENDRA GANGWAR

2 months ago

323
Profile Card

Crimson

1 year ago

2k
profile3

pablitodgb

1 year ago

1k
Weather card
Component was one shot generated using https://inspi.me

yogourt

8 months ago

1.2k
cards
html , css ,

Hacker Development

1 year ago

1.2k
Responsive Tailind css card
the best Responsive Card with image

irahoza daniel

1 year ago

1.2k
Landing page

Maxim

1 year ago

2.8k
Card KPI
Targetas

Raul antonio de la cruz hernandez

11 months ago

1k
Responsive Cards
Responsive Cards

Chanuka Rukshan

8 months ago

728
Portfolio form
Portfolio form

Joseph Melvin Kanu

2 years ago

3.5k