愿望清单组件

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="bg-gray-100 dark:bg-gray-700 px-6 py-4">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">My Wishlist</h2>
        <p class="text-gray-600 dark:text-gray-400">Items I'd love to get someday!</p>
    </div>
    <div class="divide-y divide-gray-300 dark:divide-gray-600">
        <!-- Item 1 -->
        <div class="flex items-center justify-between p-4">
            <img src="https://picsum.photos/100/100" alt="Item 1" class="rounded-full">
            <div class="ml-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Vintage Camera</h3>
                <span class="text-gray-500 dark:text-gray-400">Price: $120</span>
            </div>
            <button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
                Add to Cart
            </button>
        </div>
        <!-- Item 2 -->
        <div class="flex items-center justify-between p-4">
            <img src="https://picsum.photos/100/100" alt="Item 2" class="rounded-full">
            <div class="ml-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Retro Turntable</h3>
                <span class="text-gray-500 dark:text-gray-400">Price: $250</span>
            </div>
            <button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
                Add to Cart
            </button>
        </div>
        <!-- Item 3 -->
        <div class="flex items-center justify-between p-4">
            <img src="https://picsum.photos/100/100" alt="Item 3" class="rounded-full">
            <div class="ml-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Classic Sneakers</h3>
                <span class="text-gray-500 dark:text-gray-400">Price: $80</span>
            </div>
            <button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
                Add to Cart
            </button>
        </div>
    </div>
    <div class="px-6 py-4">
        <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Account Information</h4>
        <div class="mt-2 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10">
            <div class="ml-2">
                <p class="text-gray-900 dark:text-gray-100">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">[email protected]</p>
            </div>
        </div>
    </div>
</div>