Home
ᴀʀ!ᴀ
Responsive Card

Responsive Card

This tailwind example is contributed by ᴀʀ!ᴀ, on 10-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Card Blog Card

Author ᴀʀ!ᴀ

Fork Fullscreen

<div class="mx-auto max-w-7xl bg-white p-5">
  <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
    <article class="overflow-hidden rounded-2xl border border-gray-200 transition-all duration-300 hover:scale-[102%]">
      <a href="#" class="block">
        <img src="https://placehold.co/600x400" class="h-auto w-full object-cover" alt="Placeholder Image" />
        <div class="p-5">
          <h2 class="text-2xl">title</h2>
          <p class="line-clamp-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam tenetur enim, illo debitis harum in magni sapiente a aperiam est. Praesentium cum explicabo atque qui voluptates sit labore eius tempora?</p>
        </div>
      </a>
    </article>

<article class="overflow-hidden rounded-2xl border border-gray-200 transition-all duration-300 hover:scale-[102%]">
      <a href="#" class="block">
        <img src="https://placehold.co/600x400" class="h-auto w-full object-cover" alt="Placeholder Image" />
        <div class="p-5">
          <h2 class="text-2xl">title</h2>
          <p class="line-clamp-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam tenetur enim, illo debitis harum in magni sapiente a aperiam est. Praesentium cum explicabo atque qui voluptates sit labore eius tempora?</p>
        </div>
      </a>
    </article>

Related Examples