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

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

1 year ago

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

Author:
Mike Varen

1 year ago

3.7k
Profit Card
Profit card with deatils

Author:
dongol heart

7 months ago

1.2k
Food delivery ecommerce Card

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

5 months ago

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

Author:
Ameth Galarcio

4 months ago

1.1k
Hello Acode Master! 👋
is a passionate software developer based in Rubavu. He considers himself the top developer in the area and is committed to solving real-world problems through technology.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

208
Confirmation modal/card

Author:
Sophia Baker

2 years ago

14.8k
Subcribe Card - Alert - Notification

Author:
ABDO-SY

4 months ago

403
Service/Product card
Tour trip booking showcase card

Author:
JaxStone

2 years ago

12.4k
Animated Profile Card
Animated profile card with profile completion circle

Author:
Shivam Vishwakarma

5 months ago

889
Overlapped icons showcase
Al pasar el cursor sobre el ícono apilado, se revela el ícono completo. Hovering over the stacked icon unveils the complete icon.

Author:
Lautaro Gómez

10 months ago

1.7k
Logos cards

Author:
Maxim

5 months ago

744

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components