cardsBeginner

Blog — Tag Row

Blog card with tag chips and meta row.

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 blog card with Tailwind: image at the top, then a row of tag chips, title, excerpt, and a small footer with author + date.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/blog-cards/4.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-blog-card-4
-->
<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="rounded-[10px] border border-gray-200 bg-white px-4 pt-12 pb-4">
      <time datetime="2022-10-10" class="block text-xs text-gray-500"> 10th Oct 2022 </time>

      <a href="#">
        <h3 class="mt-0.5 text-lg font-medium text-gray-900">
          How to center an element using JavaScript and jQuery
        </h3>
      </a>

      <div class="mt-4 flex flex-wrap gap-1">
        <span
          class="rounded-full bg-purple-100 px-2.5 py-0.5 text-xs whitespace-nowrap text-purple-600"
        >
          Snippet
        </span>

        <span
          class="rounded-full bg-purple-100 px-2.5 py-0.5 text-xs whitespace-nowrap text-purple-600"
        >
          JavaScript
        </span>
      </div>
    </article>
  </div>
</div>