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

Live Preview
<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
          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-400 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

More items from the merged UI library.

View all