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

327

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.4k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

4.1k
Profit Card
Profit card with deatils

Author:
dongol heart

1 year ago

1.9k
Food delivery ecommerce Card

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

11 months ago

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

Author:
Ameth Galarcio

9 months ago

1.7k
Components

Author:
pablitodgb

4 months ago

305
Labs card
Lab item list card

Author:
Sedat Kumcu

1 year ago

1.8k
Responsive cards with hover

Author:
Robert Chunga

1 year ago

2.6k
Card with sale ribbon

Author:
Fagundo67

2 years ago

11.7k
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

6 months ago

1k
Video card
Video card component for tailwind css

Author:
Rajesh kulkarni

2 years ago

17.4k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

3 years ago

51.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components