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

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

card

Author:
pablitodgb

2 months ago

112
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

2 years ago

9.8k
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

9 months ago

1.2k
Brand Grid with Hover Effect

Author:
ariaw

5 months ago

887
Author box

Author:
Mr Robot

2 years ago

11.6k
Features

Author:
Michael Andreuzza

1 year ago

4.6k
Call to action card with image
Responsive card with image

Author:
Noah Schmidt

2 years ago

15.9k
User Profile Sidebar Menu
A clean and modern user profile sidebar menu built with TailwindCSS. This component displays a user’s profile picture, name, and a vertical navigation menu with links such as Dashboard, Order History, Account Details, Address, Reviews, and Logout. Ideal for account dashboards in web applications, the design features rounded corners, subtle shadows, and interactive hover effects, delivering a smooth and user-friendly experience.

Author:
SHARIFUL ISLAM

6 months ago

826
Card for user contact

Author:
achelton pambo

1 year ago

2.2k
User profile card with Cover Image

Author:
Noob

2 years ago

30.2k
Floating capsule

Author:
Amazing Engineer

4 months ago

476
Dynamic Google Card

Author:
Cristian

6 months ago

859

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components