愿望清单组件

<div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-transform transform hover:scale-105">  
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Wishlist</h2>  
    <ul class="space-y-4">  
        <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center">  
            <img src="https://picsum.photos/100/100?random=1" alt="Product Image" class="w-16 h-16 rounded-md mr-4 shadow-lg">  
            <div class="flex-grow">  
                <h3 class="font-medium text-gray-800 dark:text-gray-200">Product Title 1</h3>  
                <p class="text-gray-600 dark:text-gray-400">Brief description of product 1.</p>  
            </div>  
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Add to Cart</button>  
        </li>  
        <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center">  
            <img src="https://picsum.photos/100/100?random=2" alt="Product Image" class="w-16 h-16 rounded-md mr-4 shadow-lg">  
            <div class="flex-grow">  
                <h3 class="font-medium text-gray-800 dark:text-gray-200">Product Title 2</h3>  
                <p class="text-gray-600 dark:text-gray-400">Brief description of product 2.</p>  
            </div>  
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Add to Cart</button>  
        </li>  
        <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center">  
            <img src="https://picsum.photos/100/100?random=3" alt="Product Image" class="w-16 h-16 rounded-md mr-4 shadow-lg">  
            <div class="flex-grow">  
                <h3 class="font-medium text-gray-800 dark:text-gray-200">Product Title 3</h3>  
                <p class="text-gray-600 dark:text-gray-400">Brief description of product 3.</p>  
            </div>  
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Add to Cart</button>  
        </li>  
    </ul>  
    <div class="mt-6">  
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Profile</h3>  
        <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">  
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full mr-4">  
            <div>  
                <h4 class="font-medium text-gray-800 dark:text-gray-200">John Doe</h4>  
                <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet.</p>  
            </div>  
        </div>  
    </div>  
</div>