Simple But Beautiful Product Card Design
Back Tailwind - v3.0 3 years ago 413 40
HTML
<div class="p-5 bg-gray-100 text-center">
<!-- Card Design -->
<div class="bg-white w-64 m-5 py-5 transition shadow hover:shadow-lg border">
<img src="https://i.ibb.co/fQTGHg6/product-short-resolution-163-1632306571.png"
class="w-full transition scale-[95%] hover:scale-100 delay-300" />
<h2 class="pt-4">
Samsung Gallaxy J10
</h2>
<p>
<span class="text-yellow-500">$1,000</span>
</p>
<p class="mt-3">
<button
class="bg-blue-600 text-white px-4 py-2 rounded-md transition-all hover:shadow-md scale-[95%] hover:scale-100">Add
to Cart</button>
</p>
</div>
<!-- End Card Design -->
</div>