Home
ariaw
Responsive Card

Responsive Card

This tailwind example is contributed by ariaw, 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 ariaw

535

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