Componentes Navegación de pie de página Componente de navegación de pie de página

Componente de navegación de pie de página

Un componente de navegación a pie de página diseñado en un estilo retro/vintage inspirado en la estética de los años 80 y 90. Cuenta con un soporte de tema oscuro y es totalmente responsivo.

Vista previa

Código HTML

<footer class="bg-gray-800 text-white py-8 mt-10">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="text-center md:text-left">
            <h2 class="text-2xl font-bold mb-2">Stay Connected!</h2>
            <p>Follow us on our social media channels:</p>
            <div class="flex justify-center md:justify-start mt-4 space-x-4">
                <a href="#" class="text-gray-400 hover:text-white">
                    <img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="rounded-full">
                </a>
                <a href="#" class="text-gray-400 hover:text-white">
                    <img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="rounded-full">
                </a>
                <a href="#" class="text-gray-400 hover:text-white">
                    <img src="https://picsum.photos/30/30?random=3" alt="Instagram" class="rounded-full">
                </a>
            </div>
        </div>
        <nav class="mt-6 md:mt-0">
            <ul class="flex flex-col md:flex-row space-x-4">
                <li><a href="#" class="hover:text-gray-400 transition">Home</a></li>
                <li><a href="#" class="hover:text-gray-400 transition">About</a></li>
                <li><a href="#" class="hover:text-gray-400 transition">Services</a></li>
                <li><a href="#" class="hover:text-gray-400 transition">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="text-center mt-6">
        <p class="text-gray-500 text-sm">&copy; 2023 Your Company. All rights reserved.</p>
    </div>
</footer>

Componentes relacionados

Componente de navegación de pie de página

Un componente de navegación de pie de página simple diseñado en un estilo brutalista con un esquema de color triádico para interfaces de redes sociales. Incluye enlaces e imágenes de avatar, con soporte para modo oscuro.

Abrir

Componente de navegación de pie de página

Un componente de navegación de pie de página receptivo diseñado para sitios web comerciales/corporativos en modo oscuro, con un esquema de color triádico y complejidad media con funciones interactivas.

Abrir

Glassmorphism Footer Navigation

Componente de navegación de pie de página con estilo Glassmorphism, combinación de colores vibrantes y diseño complejo para fines de tablero. Diseño responsivo con soporte para modo oscuro usando Tailwind CSS.

Abrir