<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow hover:shadow-lg transition group">
        <div class="h-48 overflow-hidden">
            <img src="image.jpg" alt="Product" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
            <div class="flex justify-between items-start mb-2">
                <h3 class="font-semibold text-gray-900 dark:text-white">Product Name</h3>
                <span class="text-blue-600 dark:text-blue-400 font-bold">$79.99</span>
            </div>
            <p class="text-gray-500 dark:text-gray-400 text-sm mb-4">Product description</p>
            <button class="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm transition">Add to Cart</button>
        </div>
    </div>
</div>