Product Card

<div class="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 max-w-xs group">
  <div class="relative h-56 bg-gray-100 overflow-hidden">
    <div class="w-full h-full bg-gradient-to-br from-amber-200 to-orange-300 flex items-center justify-center text-4xl">&#128722;</div>
    <span class="absolute top-3 left-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-md">-20%</span>
  </div>
  <div class="p-4">
    <h3 class="font-semibold text-gray-800 mb-1">Wireless Headphones</h3>
    <div class="flex items-center gap-1 mb-2">
      <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
      <span class="text-sm text-gray-500">4.8 (120)</span>
    </div>
    <div class="flex items-center justify-between">
      <div><span class="text-lg font-bold text-gray-900">$79</span> <span class="text-sm text-gray-400 line-through">$99</span></div>
      <button class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">Add to Cart</button>
    </div>
  </div>
</div>