HTML 代码
<footer class="bg-gray-800 text-white p-10 flex flex-col items-center justify-center"> <div class="flex flex-wrap justify-center"> <div class="m-5"> <h4 class="text-2xl font-bold mb-2">Contact Us</h4> <p class="text-lg">Email: [email protected]</p> <p class="text-lg">Phone: (123) 456-7890</p> </div> <div class="m-5"> <h4 class="text-2xl font-bold mb-2">Follow Us</h4> <div class="flex space-x-4"> <a href="#" class="text-lg hover:text-gray-400">Facebook</a> <a href="#" class="text-lg hover:text-gray-400">Twitter</a> <a href="#" class="text-lg hover:text-gray-400">Instagram</a> </div> </div> <div class="m-5"> <h4 class="text-2xl font-bold mb-2">About Us</h4> <p class="text-lg">We are a company that values...</p> </div> </div> <div class="flex flex-wrap justify-center mt-10"> <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1"> <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar 2"> <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/men/34.jpg" alt="Avatar 3"> </div> <div class="mt-10 text-center"> <p class="text-sm">© 2023 Example Company. All Rights Reserved.</p> </div> <style> @media (prefers-color-scheme: dark) { .bg-gray-800 { background-color: #1a1a1a; } .text-white { color: #f0f0f0; } .hover\:text-gray-400:hover { color: #a0a0a0; } } </style> </footer>