Home
pablitodgb
avtarCard3

avtarCard3

This tailwind example is contributed by pablitodgb, on 26-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Article Card, Blog page card, Article card

Card Grid Blog Card

Author pablitodgb

594

Fork Fullscreen

<div class="h-full w-screen text-slate-600 bg-gradient-to-t from-cyan-200 to-blue-300 flex justify-center items-center dark:text-slate-100 dark:bg-gradient-to-b dark:from-slate-700 dark:to-gray-400">
  <div class="py-3 h-full w-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
    
    
    <section class="w-full max-w-xs mx-auto bg-transparent space-y-2 outline outline-1 outline-gray-200 shadow-xl shadow-slate-500 rounded-lg dark:outline-cyan-500 dark:shadow-green-500 p-4">
      <img
        class="mx-auto object-cover size-32 rounded-full transition delay-150 duration-200 overflow-hidden ease-in-out hover:-translate-y-1 hover:scale-110"
        src="https://images.unsplash.com/photo-1500048993953-d23a436266cf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMHx8cGVyc29ufGVufDB8MHx8fDE3NTA5NjMwNjd8MA&ixlib=rb-4.1.0&q=80&w=1080"
        alt="Profile picture of John Doe"
      />
      <main class="text-center font-semibold text-xl">John Doe</main>
      <cite class="block text-center font-normal text-md">Software Developer at Construction Company</cite>
    </section>

<section class="w-full max-w-xs mx-auto bg-transparent space-y-2 outline outline-1 outline-gray-200 shadow-xl shadow-slate-500 rounded-lg dark:outline-cyan-500 dark:shadow-green-500 p-4">
      <img
        class="mx-auto object-cover size-32 rounded-full transition delay-150 duration-200 overflow-hidden ease-in-out hover:-translate-y-1 hover:scale-110"
        src="https://images.unsplash.com/photo-1500048993953-d23a436266cf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMHx8cGVyc29ufGVufDB8MHx8fDE3NTA5NjMwNjd8MA&ixlib=rb-4.1.0&q=80&w=1080"
        alt="Profile picture of John Doe"
      />
      <main class="text-center font-semibold text-xl">John Doe</main>
      <cite class="block text-center font-normal text-md">Software Developer at Construction Company</cite>
    </section>

Related Examples