cardsBeginner

Blog — Magazine

Magazine-style blog card with category badge.

Live preview

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 magazine-style blog card with Tailwind: image on top with a category badge overlaid, then heading + excerpt with bold typography.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/blog-cards/7.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-blog-card-7
-->
<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="relative overflow-hidden rounded-lg shadow-sm transition hover:shadow-lg">
      <img
        alt=""
        src="https://images.unsplash.com/photo-1661956602116-aa6865609028?auto=format&fit=crop&q=80&w=1160"
        class="absolute inset-0 h-full w-full object-cover"
      />

      <div class="relative bg-linear-to-t from-gray-900/50 to-gray-900/25 pt-32 sm:pt-48 lg:pt-64">
        <div class="p-4 sm:p-6">
          <time datetime="2022-10-10" class="block text-xs text-white/90"> 10th Oct 2022 </time>

          <a href="#">
            <h3 class="mt-0.5 text-lg text-white">How to position your furniture for positivity</h3>
          </a>

          <p class="mt-2 line-clamp-3 text-sm/relaxed text-white/95">
            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>
        </div>
      </div>
    </article>
  </div>
</div>