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

262

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