Vibedex.io
Back to gallery
cardsBeginner

Image-Stack Blog Card

Blog card with horizontally arranged image and content.

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a horizontal blog card with Tailwind: image on the left (1/3 width), text content on the right (2/3 width) with category tag, title, excerpt, and date + reading-time meta. Stack on mobile with image on top. Subtle border and hover lift.

Code

html
<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/blog-cards/3.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-blog-card-2
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="mx-auto max-w-md p-6 w-full">
<article class="overflow-hidden rounded-lg border border-gray-100 bg-white shadow-xs">
      <img
        alt=""
        src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?auto=format&fit=crop&q=80&w=1160"
        class="h-56 w-full object-cover"
      />

      <div class="p-4 sm:p-6">
        <a href="#">
          <h3 class="text-lg font-medium text-gray-900">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </h3>
        </a>

        <p class="mt-2 line-clamp-3 text-sm/relaxed text-gray-500">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
          pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis
          quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius
          atque dignissimos. Molestias explicabo corporis voluptatem?
        </p>

        <a
          href="#"
          class="group mt-4 inline-flex items-center gap-1 text-sm font-medium text-blue-600"
        >
          Find out more

          <span aria-hidden="true" class="block transition-all group-hover:ms-0.5 rtl:rotate-180">
            &rarr;
          </span>
        </a>
      </div>
    </article>
  </div>
</div>