Product Cards Component

<div class="flex flex-wrap justify-center p-4">  
    <!-- Product Card -->  
    <div class="max-w-xs rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-800 transition-transform transform hover:scale-105 mx-4 mb-6">  
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image">  
        <div class="p-4">  
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Product Name</h2>  
            <p class="text-gray-600 dark:text-gray-300 mt-2">Brief description of the product that highlights its features and benefits.</p>  
            <div class="flex items-center mt-4">  
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">  
                <div class="ml-2">  
                    <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>  
                    <p class="text-gray-600 dark:text-gray-400 text-sm">Designer</p>  
                </div>  
            </div>  
        </div>  
    </div>  

    <!-- Repeat for more products -->  
    <div class="max-w-xs rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-800 transition-transform transform hover:scale-105 mx-4 mb-6">  
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image">  
        <div class="p-4">  
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Product Name 2</h2>  
            <p class="text-gray-600 dark:text-gray-300 mt-2">Another product description highlighting its unique aspects.</p>  
            <div class="flex items-center mt-4">  
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">  
                <div class="ml-2">  
                    <p class="text-gray-800 dark:text-white font-semibold">Jane Smith</p>  
                    <p class="text-gray-600 dark:text-gray-400 text-sm">Developer</p>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>