HTML 代码
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">My Wishlist</h2>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
<img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist1/100/100" alt="Wishlist Item 1" />
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 1</h3>
<p class="text-gray-500 dark:text-gray-400">Description of Item 1</p>
<span class="text-purple-600 dark:text-purple-400">$29.99</span>
</div>
</li>
<li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
<img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist2/100/100" alt="Wishlist Item 2" />
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 2</h3>
<p class="text-gray-500 dark:text-gray-400">Description of Item 2</p>
<span class="text-purple-600 dark:text-purple-400">$39.99</span>
</div>
</li>
<li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
<img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist3/100/100" alt="Wishlist Item 3" />
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 3</h3>
<p class="text-gray-500 dark:text-gray-400">Description of Item 3</p>
<span class="text-purple-600 dark:text-purple-400">$49.99</span>
</div>
</li>
</ul>
<div class="mt-4 flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-300">Total:</span>
<span class="text-purple-600 dark:text-purple-400 font-bold">$119.97</span>
</div>
<button class="mt-4 w-full bg-purple-500 dark:bg-purple-600 text-white font-semibold py-2 rounded hover:bg-purple-600 dark:hover:bg-purple-700 transition duration-200">Checkout</button>
</div>