card

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

Card Avatar

Author pablitodgb

Tailwind v3.4 1.1k 2

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

Tamani Phiri

3 years ago

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

Mike Varen

2 years ago

5.2k
Profit Card
Profit card with deatils

dongol heart

1 year ago

3k
Food delivery ecommerce Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

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

Ameth Galarcio

1 year ago

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

Alif Bima Pradana

9 months ago

455
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

irahoza daniel

1 year ago

1.5k
card
card section. find it makecomponents.com

makecomponents

2 years ago

2.7k
Thankyou Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.6k
Product Card

Maxim

1 year ago

2.1k
Profile Card
Modern Profile card with Subtle overlay on image, minimal and clean approach with emphasis on readability and hierarchy.

UI-Templates

1 year ago

1.5k
Card with Thumbnail
Post card with image

Mr Robot

4 years ago

12k