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 estilo Glassmorphism con un esquema de color monocromático. Es responsivo, admite el modo oscuro y es adecuado para sitios web de comercio electrónico.

Abrir

Componente de navegación de pie de página

Un componente de navegación de pie de página responsivo con un tema oscuro, adecuado para un sitio web de portafolio. Cuenta con un esquema de color monocromático con diferentes tonos de un solo color, complejidad media con algunas características interactivas y usa Tailwind CSS para el estilo, incluido el soporte del modo oscuro con el prefijo dark:.

Abrir

Componente de navegación de pie de página

Un componente de navegación de pie de página de estilo neomorfismo complejo y receptivo para sitios web corporativos que utiliza un esquema de color en escala de grises con soporte para modo oscuro. Sin JavaScript.

Abrir