Home
TakaMorY
cards

cards

group of cards

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

Card

Author TakaMorY

209

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

Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

6 months ago

884
Product cards
Product cards for eCommerce

Author:
ehmasuk

1 day ago

18
Profile card

Author:
Mr Robot

2 years ago

12.5k
offer card

Author:
ABDO-SY

7 months ago

797
Profile card
tailwind Profile Card

Author:
Md. Tofayel islam

1 year ago

2.6k
Feature cards with icons on top

Author:
Manon Daniel

2 years ago

16.6k
Profile1

Author:
pablitodgb

4 months ago

351
Material 3 Cards [Light]
Cards that conform to Google's Material 3 design guidelines and themes

Author:
Nick Girga

5 months ago

515
Simple Card with Image
Horizontal card

Author:
Prem..

3 years ago

9k
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Author:
Muhammad Umair Arshad

2 months ago

379
Tailwind card

Author:
Conan Hilton

2 years ago

13k
Blog post cards
responsive blog post cards

Author:
Mr Robot

2 years ago

12.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components