cardsBeginner

Card — Action Hero

Card with large image, copy, and prominent CTA.

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 marketing card with Tailwind: large image at the top, then copy with a heading and 2-3 lines, and a prominent CTA button at the bottom. Like a feature spotlight card.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/cards/3.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-card-3
-->
<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">
<a href="#" class="group relative block bg-black">
      <img
        alt=""
        src="https://images.unsplash.com/photo-1603871165848-0aa92c869fa1?auto=format&fit=crop&q=80&w=1160"
        class="absolute inset-0 h-full w-full object-cover opacity-75 transition-opacity group-hover:opacity-50"
      />

      <div class="relative p-4 sm:p-6 lg:p-8">
        <p class="text-sm font-medium tracking-widest text-pink-500 uppercase">Developer</p>

        <p class="text-xl font-bold text-white sm:text-2xl">Tony Wayne</p>

        <div class="mt-32 sm:mt-48 lg:mt-64">
          <div
            class="translate-y-8 transform opacity-0 transition-all group-hover:translate-y-0 group-hover:opacity-100"
          >
            <p class="text-sm text-white">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis perferendis hic
              asperiores quibusdam quidem voluptates doloremque reiciendis nostrum harum.
              Repudiandae?
            </p>
          </div>
        </div>
      </div>
    </a>
  </div>
</div>