Componente de pie de página
Un componente de pie de página de estilo brutalismo con efectos responsivos y soporte de temas oscuros usando Tailwind CSS.
Código 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>
Componentes relacionados
Componente de pie de página
Un componente de pie de página diseñado en un estilo skeuomórfico con un esquema de color triádico y complejidad moderada, adecuado para un diseño de blog/contenido.
Componente de pie de página
Un componente de pie de página de modo oscuro simple para redes sociales con combinación de colores complementaria.
Portafolio-Minimalista-Triádico-Complejo-Pie de página
Un pie de página complejo y de estilo minimalista para un sitio web de portafolio, que utiliza un esquema de color triádico. Incluye enlaces de navegación, iconos de redes sociales, derechos de autor y una llamada a la acción para el contacto, con capacidad de respuesta total y compatibilidad con el modo oscuro.