Skip to content
HyperUI

No results found.

Back to marketing components

Product Cards

Product card components built with Tailwind CSS. These responsive, SEO-friendly cards are perfect for showcasing products in eCommerce stores, landing pages, and marketing sites. Easily customizable for any brand or catalog.

0/8 Dark Mode (Request)Updated: Jul 4, 2026

Product with image, title and price

markmead

<a href="#" class="group block overflow-hidden">
  <div class="relative h-87.5 sm:h-112.5">
    <img
      src="https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&q=80&w=1160"
      alt=""
      class="absolute inset-0 h-full w-full object-cover opacity-100 group-hover:opacity-0"
    />

    <img
      src="https://images.unsplash.com/photo-1523381140794-a1eef18a37c7?auto=format&fit=crop&q=80&w=1160"
      alt=""
      class="absolute inset-0 h-full w-full object-cover opacity-0 group-hover:opacity-100"
    />
  </div>

  <div class="relative bg-white pt-3">
    <h3 class="text-sm text-gray-700 group-hover:underline group-hover:underline-offset-4">
      Limited Edition Sports Trainer
    </h3>

    <p class="mt-1.5 tracking-wide text-gray-900">$189.99</p>
  </div>
</a>

Product with image, title, price and variant count

markmead

<a href="#" class="group block overflow-hidden">
  <div class="relative h-87.5 sm:h-112.5">
    <img
      src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?auto=format&fit=crop&q=80&w=1160"
      alt=""
      class="absolute inset-0 h-full w-full object-cover opacity-100 group-hover:opacity-0"
    />

    <img
      src="https://images.unsplash.com/photo-1600185365926-3a2ce3cdb9eb?auto=format&fit=crop&q=80&w=1160"
      alt=""
      class="absolute inset-0 h-full w-full object-cover opacity-0 group-hover:opacity-100"
    />
  </div>

  <div class="relative bg-white pt-3">
    <h3 class="text-sm text-gray-700 group-hover:underline group-hover:underline-offset-4">
      Limited Edition Sports Trainer
    </h3>

    <div class="mt-1.5 flex items-center justify-between text-gray-900">
      <p class="tracking-wide">$189.99</p>

      <p class="text-xs tracking-wide uppercase">6 Colors</p>
    </div>
  </div>
</a>

Product with image, title, price and description

markmead

<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>

Product with rounded image, title and price

markmead

<a href="#" class="group block">
  <img
    src="https://images.unsplash.com/photo-1592921870789-04563d55041c?auto=format&fit=crop&q=80&w=1160"
    alt=""
    class="aspect-square w-full rounded-sm object-cover"
  />

  <div class="mt-3">
    <h3 class="font-medium text-gray-900 group-hover:underline group-hover:underline-offset-4">
      Simple Watch
    </h3>

    <p class="mt-1 text-sm text-gray-700">$150</p>
  </div>
</a>

Product with image, title, price and variant options

markmead

<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-1.5">
    <p class="text-xs text-gray-500">Space Grey</p>

    <div class="mt-1.5 flex gap-1">
      <form>
        <fieldset>
          <legend class="sr-only">Color</legend>
        </fieldset>

        <div class="flex flex-wrap justify-center gap-1">
          <div>
            <input type="checkbox" id="ColorSg" class="sr-only" />

            <label for="ColorSg" class="block size-4 cursor-pointer rounded-full bg-[#595759]">
              <span class="sr-only"> Space Gray </span>
            </label>
          </div>

          <div>
            <input type="checkbox" id="ColorS" class="sr-only" />

            <label for="ColorS" class="block size-4 cursor-pointer rounded-full bg-[#d2d3d4]">
              <span class="sr-only"> Silver </span>
            </label>
          </div>

          <div>
            <input type="checkbox" id="ColorP" class="sr-only" />

            <label for="ColorP" class="block size-4 cursor-pointer rounded-full bg-[#d89f97]">
              <span class="sr-only"> Pink </span>
            </label>
          </div>

          <div>
            <input type="checkbox" id="ColorG" class="sr-only" />

            <label for="ColorG" class="block size-4 cursor-pointer rounded-full bg-[#afbfab]">
              <span class="sr-only"> Pink </span>
            </label>
          </div>

          <div>
            <input type="checkbox" id="ColorSb" class="sr-only" />

            <label for="ColorSb" class="block size-4 cursor-pointer rounded-full bg-[#91a5bb]">
              <span class="sr-only"> Pink </span>
            </label>
          </div>
        </div>
      </form>
    </div>

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

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

Product with image, title, price, tag, wishlist and call to action

markmead

<a href="#" class="group relative block overflow-hidden">
  <button
    class="absolute end-4 top-4 z-10 rounded-full bg-white p-1.5 text-gray-900 transition hover:text-gray-900/75"
  >
    <span class="sr-only">Wishlist</span>

    <svg
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="size-4"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
      />
    </svg>
  </button>

  <img
    src="https://images.unsplash.com/photo-1599481238640-4c1288750d7a?auto=format&fit=crop&q=80&w=1160"
    alt=""
    class="h-64 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-72"
  />

  <div class="relative border border-gray-100 bg-white p-6">
    <span class="bg-yellow-400 px-3 py-1.5 text-xs font-medium whitespace-nowrap"> New </span>

    <h3 class="mt-4 text-lg font-medium text-gray-900">Robot Toy</h3>

    <p class="mt-1.5 text-sm text-gray-700">$14.99</p>

    <form class="mt-4">
      <button
        class="block w-full rounded-sm bg-yellow-400 p-4 text-sm font-medium transition hover:scale-105"
      >
        Add to Cart
      </button>
    </form>
  </div>
</a>

Product with image, title, description, offer and call to action

markmead

<a href="#" class="relative block rounded-se-3xl border border-gray-100">
  <span
    class="absolute -top-px -right-px rounded-se-3xl rounded-es-3xl bg-rose-600 px-6 py-4 font-medium tracking-widest text-white uppercase"
  >
    Save 10%
  </span>

  <img
    src="https://images.unsplash.com/photo-1485955900006-10f4d324d411?auto=format&fit=crop&q=80&w=1160"
    alt=""
    class="h-80 w-full rounded-se-3xl object-cover"
  />

  <div class="p-4 text-center">
    <strong class="text-xl font-medium text-gray-900"> Aloe Vera </strong>

    <p class="mt-2 text-pretty text-gray-700">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet officia rem vel voluptatum
      in eum vitae aliquid at sed dignissimos.
    </p>

    <span
      class="mt-4 block rounded-md border border-indigo-900 bg-indigo-900 px-5 py-3 text-sm font-medium tracking-widest text-white uppercase transition-colors hover:bg-white hover:text-indigo-900"
    >
      Buy now
    </span>
  </div>
</a>

Product with image, title, price, wishlist and call to actions

markmead

<a href="#" class="group relative block overflow-hidden">
  <button
    class="absolute end-4 top-4 z-10 rounded-full bg-white p-1.5 text-gray-900 transition hover:text-gray-900/75"
  >
    <span class="sr-only">Wishlist</span>

    <svg
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="size-4"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
      />
    </svg>
  </button>

  <img
    src="https://images.unsplash.com/photo-1628202926206-c63a34b1618f?auto=format&fit=crop&q=80&w=1160"
    alt=""
    class="h-64 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-72"
  />

  <div class="relative border border-gray-100 bg-white p-6">
    <p class="text-gray-700">
      $49.99
      <span class="text-gray-600 line-through">$80</span>
    </p>

    <h3 class="mt-1.5 text-lg font-medium text-gray-900">Wireless Headphones</h3>

    <p class="mt-1.5 line-clamp-3 text-gray-700">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore nobis iure obcaecati
      pariatur. Officiis qui, enim cupiditate aliquam corporis iste.
    </p>

    <form class="mt-4 flex gap-4">
      <button
        class="block w-full rounded-sm bg-gray-100 px-4 py-3 text-sm font-medium text-gray-900 transition hover:scale-105"
      >
        Add to Cart
      </button>

      <button
        type="button"
        class="block w-full rounded-sm bg-gray-900 px-4 py-3 text-sm font-medium text-white transition hover:scale-105"
      >
        Buy Now
      </button>
    </form>
  </div>
</a>

Related components

View all marketing components