card

This tailwind example is contributed by pablitodgb, on 25-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card Avatar

Author pablitodgb

740

Fork Fullscreen

<div class="p-0 m-0 h-full w-full text-slate-600 bg-slate-200 flex justify-center items-center dark:text-slate-200 dark:bg-slate-600">
  <div class="p-1 m-1 bg-slate-100 rounded-lg h-auto w-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 shadow shadow-lg shadow-slate-500/50 dark:shadow-cyan-500/50">
    <div class="bg-slate-100 rounded-lg h-72 w-60 overflow-hidden shadow shadow-lg shadow-slate-500/50 dark:shadow-cyan-500/50">
    <img class="h-full w-full object-cover transition delay-150 duration-300 ease-in-out hover:-translate-y-1 hover:scale-110 " src="https://images.unsplash.com/photo-1631557673853-b5c9c45527ef?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxmbGFza3xlbnwwfDB8fHwxNzUwODM3MTM0fDA&ixlib=rb-4.1.0&q=80&w=1080"/>
    <div class="h-fit w-full  p-1 relative -top-20 bg-white/30 backdrop-blur-sm rounded-lg">
      <main class="w-fit text-slate-200 relative top-1">
        <p class="text-md bg-transparent">Lorem</P>
        <p class="text-xl font-semibold">Lorem</P>
      </main>
      <main class="p-1 m-1 w-fit text-center text-slate-200 text-xl font-semibold rounded-lg obesity-10 relative -top-10 left-48">90</main>
    </div>
    </div>
    <div class="bg-slate-100 rounded-lg h-72 w-60 overflow-hidden shadow shadow-lg shadow-slate-500/50 dark:shadow-cyan-500/50">
    <img class="h-full w-full object-cover transition delay-150 duration-300 ease-in-out hover:-translate-y-1 hover:scale-110 " src="https://images.unsplash.com/photo-1631557673853-b5c9c45527ef?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxmbGFza3xlbnwwfDB8fHwxNzUwODM3MTM0fDA&ixlib=rb-4.1.0&q=80&w=1080"/>
    <div class="h-fit w-full  p-1 relative -top-20 bg-white/30 backdrop-blur-sm rounded-lg">
      <main class="w-fit text-slate-200 relative top-1">
        <p class="text-md bg-transparent">Lorem</P>
        <p class="text-xl font-semibold">Lorem</P>
      </main>
      <main class="p-1 m-1 w-fit text-center text-slate-200 text-xl font-semibold rounded-lg obesity-10 relative -top-10 left-48">90</main>
    </div>
    </div>
    <div class="bg-slate-100 rounded-lg h-72 w-60 overflow-hidden shadow shadow-lg shadow-slate-500/50 dark:shadow-cyan-500/50">
    <img class="h-full w-full object-cover transition delay-150 duration-300 ease-in-out hover:-translate-y-1 hover:scale-110 " src="https://images.unsplash.com/photo-1631557673853-b5c9c45527ef?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxmbGFza3xlbnwwfDB8fHwxNzUwODM3MTM0fDA&ixlib=rb-4.1.0&q=80&w=1080"/>
    <div class="h-fit w-full  p-1 relative -top-20 bg-white/30 backdrop-blur-sm rounded-lg">
      <main class="w-fit text-slate-200 relative top-1">
        <p class="text-md bg-transparent">Lorem</P>
        <p class="text-xl font-semibold">Lorem</P>
      </main>
      <main class="p-1 m-1 w-fit text-center text-slate-200 text-xl font-semibold rounded-lg obesity-10 relative -top-10 left-48">90</main>
    </div>
    </div>
  </div>
</div>

Related Examples

Profile Card
Show more details on hover

Author:
Tamani Phiri

2 years ago

14.7k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

4.4k
Profit Card
Profit card with deatils

Author:
dongol heart

1 year ago

2.2k
Food delivery ecommerce Card

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2.1k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

1 year ago

1.9k
Latest Blog Card Components
Stay ahead of the curve with fresh content on code, design, startups, and everything in between.

Author:
Alif Bima Pradana

1 month ago

90
Info card for admin panal
Show stats on your dashboard

Author:
Arya

3 years ago

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

7 months ago

771
Stylish Mobile-First Navigation Bar Using Tailwind
This project showcases a sleek, fixed-top responsive navigation bar crafted with Tailwind CSS. Featuring a vibrant gradient background, a bold uppercase logo, and smooth pink hover effects, it adapts beautifully across devices. On desktop, the navigation links appear horizontally with ample spacing, while on mobile, a hamburger menu toggles a stylish dropdown with rounded corners and subtle shadows. The navbar’s semi-transparent backdrop with blur adds a modern glassmorphism touch, making it perfect for contemporary web designs.

Author:
Bonimater

9 months ago

877
Stats card with icons
Improved Code quality and added support for dark mode

Author:
Dika Rahman

1 year ago

1.9k
User Profile
User Profile

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.7k
carde Iptplus
Iptplus carde

Author:
Omer fils ELENGA

3 months ago

260

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components