cardsBeginner

Product — Sale Tag

Product card with sale price and original price strikethrough.

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 sale-tagged product card with Tailwind: image with a 'SALE' chip, then name, sale price (red), original price (strikethrough), and add-to-cart button.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/product-cards/3.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-product-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 block">
      <img
        src="https://images.unsplash.com/photo-1592921870789-04563d55041c?auto=format&fit=crop&q=80&w=1160"
        alt=""
        class="h-87.5 w-full object-cover sm:h-112.5"
      />

      <div class="mt-3 flex justify-between text-sm">
        <div>
          <h3 class="text-gray-900 group-hover:underline group-hover:underline-offset-4">
            Small Headphones
          </h3>

          <p class="mt-1.5 text-xs text-pretty text-gray-500">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi nobis, quia soluta
            quisquam voluptatem nemo.
          </p>
        </div>

        <p class="text-gray-900">$299</p>
      </div>
    </a>
  </div>
</div>