HTML 代码
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg"> <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Shopping Cart</h2> <ul class="space-y-4"> <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600"> <img src="https://picsum.photos/50/50" alt="Product Image" class="mr-4 rounded"> <div class="flex-1"> <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name</h3> <p class="text-gray-600 dark:text-gray-400">$19.99</p> </div> <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button> </li> <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600"> <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="mr-4 rounded"> <div class="flex-1"> <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Product</h3> <p class="text-gray-600 dark:text-gray-400">$29.99</p> </div> <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button> </li> </ul> <div class="mt-6"> <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Total: <span class="text-blue-500">$49.98</span></h4> </div> <button class="mt-4 bg-green-500 text-white rounded-full px-4 py-2 shadow transition duration-300 hover:bg-green-600">Checkout</button> <footer class="mt-6 text-center text-gray-600 dark:text-gray-400"> <p>Created for Portfolio</p> </footer> </div>