Componenti Navigazione a piè di pagina Componente di navigazione del piè di pagina

Componente di navigazione del piè di pagina

Un semplice componente di navigazione a piè di pagina progettato in stile brutalista con una combinazione di colori triadica per le interfacce dei social media. Include collegamenti e immagini avatar, con supporto per la modalità oscura.

Anteprima

Codice HTML

<footer class="bg-gray-800 dark:bg-gray-900 text-white py-4">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="flex flex-col md:flex-row items-center">
            <img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mb-2 md:mb-0 md:mr-4">
            <ul class="flex space-x-4">
                <li><a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Home</a></li>
                <li><a href="#" class="hover:text-red-400 dark:hover:text-red-300">About</a></li>
                <li><a href="#" class="hover:text-green-400 dark:hover:text-green-300">Contact</a></li>
            </ul>
        </div>
        <div class="flex space-x-4 mt-4 md:mt-0">
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Facebook</a>
            <a href="#" class="hover:text-red-400 dark:hover:text-red-300">Twitter</a>
            <a href="#" class="hover:text-green-400 dark:hover:text-green-300">Instagram</a>
        </div>
    </div>
</footer>

Componenti correlati

Componente di navigazione del piè di pagina

Componente di navigazione a piè di pagina con modalità scura ed effetti reattivi

Aperto

Navigazione con piè di pagina di Glassmorphism

Componente di navigazione a piè di pagina con stile Glassmorphism, combinazione di colori vivaci e layout complesso per scopi di dashboard. Design reattivo con supporto per la modalità oscura utilizzando Tailwind CSS.

Aperto

Componente di navigazione del piè di pagina

Un semplice componente di navigazione a piè di pagina con i principi di Material Design e una combinazione di colori analoga per siti Web aziendali/aziendali. Supporta la modalità oscura ed è reattivo.

Aperto