页脚导航组件 38

<footer class="bg-gray-800 text-white p-6 mt-8">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="flex flex-col items-center md:items-start">
            <h2 class="text-lg font-bold mb-2">Stay Connected</h2>
            <p class="text-sm">Follow us on our social channels!</p>
            <div class="flex space-x-4 mt-2">
                <a href="#" class="bg-blue-600 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">FB</a>
                <a href="#" class="bg-blue-400 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">TW</a>
                <a href="#" class="bg-red-600 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">IG</a>
            </div>
        </div>
        <div class="flex flex-col items-center md:items-start mt-6 md:mt-0">
            <h2 class="text-lg font-bold mb-2">About Us</h2>
            <ul class="text-sm space-y-1">
                <li><a href="#" class="hover:underline">Our Story</a></li>
                <li><a href="#" class="hover:underline">Career</a></li>
                <li><a href="#" class="hover:underline">Contact</a></li>
            </ul>
        </div>
        <div class="flex flex-col items-center md:items-start mt-6 md:mt-0">
            <h2 class="text-lg font-bold mb-2">User Profiles</h2>
            <div class="flex space-x-2">
                <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <img src="https://randomuser.me/api/portraits/men/13.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
            </div>
        </div>
    </div>
    <div class="mt-6 text-center text-sm">
        <p>&copy; 2023 Your Company. All Rights Reserved.</p>
        <p class="text-gray-400">Powered by <a href="#" class="text-white hover:underline">Your Technology</a></p>
    </div>
</footer>
<style>
    @media (prefers-color-scheme: dark) {
        footer {
            background-color: #1f1f1f;
        }
        footer a {
            color: #white;
        }
        footer a:hover {
            color: #cbd5e1;
        }
    }
</style>