Responsive Card

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

Card Blog Card

Author ariaw

Tailwind v3.4 983 2

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

Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Responsive Article Section

Prashant

4 years ago

17.2k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.1k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k
Card grid for posts

Mr Robot

3 years ago

24.2k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.2k
Card with image
Blog post card

Mr Robot

3 years ago

11.1k
Card with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Mr Robot

3 years ago

14.1k
Card
amazing card

Cristian

1 year ago

2.5k
Card responsive and dark mode grid

Cristian

1 year ago

2.4k
Blog Card

Md. Tofayel islam

1 year ago

2.6k