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

393

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

Product card

Author:
Oliver Hansen

3 years ago

13.8k
card
best responsive tailwind card

Author:
irahoza daniel

8 months ago

730
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Author:
Omer fils ELENGA

2 weeks ago

63
Product Card for eCommerce
Here is a Product Card with discount badge, price with discount and price normally. On other hand, buttons for up or down quantity and add to cart button. This is create for Grid Columns, wich can 4 or 5 depend for desktop

Author:
Andrés Abarzúa

6 months ago

972
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Author:
Maxim

1 year ago

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

Author:
yogourt

1 week ago

138
Image cards

Author:
Reuben Enahoro

1 year ago

1.9k
Experience Card
Experience card section you can use for portfolio or other profiles.

Author:
Khalid

1 year ago

3.9k
Profile card

Author:
ariaw

4 months ago

402
Floating capsule

Author:
Amazing Engineer

8 months ago

736
Smooth Scale & Float Reveal
An enhanced scroll interaction that combines a vertical slide with a subtle scaling effect. As elements enter the viewport, they smoothly float up and scale to their full size, creating a polished, modern depth effect without complex libraries.

Author:
Juan D. Cortorreal

1 month ago

272
Professional Plan
Professional Plan

Author:
Muzammil Riaz

7 months ago

370

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components