Product Card Component Design using Tailwind CSS

tailwind-card-component.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://api-ecom.allgeneration.com/public/images/products/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">100TK</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>