Vibedex.io
Back to gallery
cardsBeginner

Card — Stacked Image

Vertical card with image stacked above 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 vertical marketing card with Tailwind: image stacked above heading, paragraph, and CTA. Used in 3-up grids on landing pages.

Code

html
<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/cards/6.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-card-6
-->
<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-xl border border-gray-700 bg-gray-800 p-4">
      <div class="flex items-center gap-4">
        <img
          alt=""
          src="https://images.unsplash.com/photo-1614644147724-2d4785d69962?auto=format&fit=crop&q=80&w=1160"
          class="size-16 rounded-full object-cover"
        />

        <div>
          <h3 class="text-lg font-medium text-white">Claire Mac</h3>

          <div class="flow-root">
            <ul class="-m-1 flex flex-wrap">
              <li class="p-1 leading-none">
                <a href="#" class="text-xs font-medium text-gray-300"> Twitter </a>
              </li>

              <li class="p-1 leading-none">
                <a href="#" class="text-xs font-medium text-gray-300"> GitHub </a>
              </li>

              <li class="p-1 leading-none">
                <a href="#" class="text-xs font-medium text-gray-300">Website</a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <ul class="mt-4 space-y-2">
        <li>
          <a
            href="#"
            class="block h-full rounded-lg border border-gray-700 p-4 hover:border-pink-600"
          >
            <strong class="font-medium text-white">Project A</strong>

            <p class="mt-1 text-xs font-medium text-gray-300">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime consequuntur deleniti,
              unde ab ut in!
            </p>
          </a>
        </li>

        <li>
          <a
            href="#"
            class="block h-full rounded-lg border border-gray-700 p-4 hover:border-pink-600"
          >
            <strong class="font-medium text-white">Project B</strong>

            <p class="mt-1 text-xs font-medium text-gray-300">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente cumque saepe sit.
            </p>
          </a>
        </li>
      </ul>
    </article>
  </div>
</div>