cardsBeginner

Blog — Minimal

Minimal blog card without imagery.

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 minimal blog card with Tailwind: no image — just heading, excerpt, and a footer with category, author, and date. Used in sidebar 'related posts' lists.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/blog-cards/6.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-blog-card-6
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="mx-auto max-w-3xl p-6 w-full">
<article class="flex bg-white transition hover:shadow-xl">
      <div class="rotate-180 p-2 [writing-mode:vertical-lr]">
        <time
          datetime="2022-10-10"
          class="flex items-center justify-between gap-4 text-xs font-bold text-gray-900 uppercase"
        >
          <span>2022</span>
          <span class="w-px flex-1 bg-gray-900/10"></span>
          <span>Oct 10</span>
        </time>
      </div>

      <div class="hidden sm:block sm:basis-56">
        <img
          alt=""
          src="https://images.unsplash.com/photo-1609557927087-f9cf8e88de18?auto=format&fit=crop&q=80&w=1160"
          class="aspect-square h-full w-full object-cover"
        />
      </div>

      <div class="flex flex-1 flex-col justify-between">
        <div class="border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6">
          <a href="#">
            <h3 class="font-bold text-gray-900 uppercase">
              Finding the right guitar for your style - 5 tips
            </h3>
          </a>

          <p class="mt-2 line-clamp-3 text-sm/relaxed text-gray-700">
            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 class="sm:flex sm:items-end sm:justify-end">
          <a
            href="#"
            class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold text-gray-900 uppercase transition hover:bg-yellow-400"
          >
            Read Blog
          </a>
        </div>
      </div>
    </article>
  </div>
</div>