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