Componente di navigazione del piè di pagina
Un componente di navigazione a piè di pagina reattivo per dashboard con supporto per temi scuri, con microinterazioni sui passaggi del mouse sui collegamenti utilizzando colori triadici ed elementi complessi. Niente JavaScript, solo HTML con Tailwind CSS.
Codice HTML
<footer class="bg-blue-100 dark:bg-blue-900">
<div class="container mx-auto px-6 py-8">
<div class="flex flex-col items-center text-center">
<div class="flex flex-wrap justify-center -mx-4">
<a href="#" class="mx-4 text-sm text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-110">About</a>
<a href="#" class="mx-4 text-sm text-red-800 dark:text-red-200 hover:text-red-600 dark:hover:text-red-400 transition duration-300 ease-in-out transform hover:scale-110">Blog</a>
<a href="#" class="mx-4 text-sm text-yellow-800 dark:text-yellow-200 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-300 ease-in-out transform hover:scale-110">Careers</a>
<a href="#" class="mx-4 text-sm text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-110">Contact Us</a>
</div>
<p class="mt-4 text-sm text-blue-800 dark:text-blue-200">© 2023 Dashboard Inc. All rights reserved.</p>
</div>
</div>
</footer>Componenti correlati
Brutalismo E-commerce Footer Navigation
Un componente di navigazione a piè di pagina semplice e brutale per l'e-commerce, con colori pastello e supporto per la modalità scura.
Componente di navigazione a piè di pagina - Industrial Ocean
Un componente di navigazione a piè di pagina complesso e reattivo in stile industriale con combinazione di colori oceano/blu, adatto per siti Web di eventi/conferenze. Include collegamenti a più colonne, icone dei social media, copyright e supporto per la modalità oscura.
Componente di navigazione del piè di pagina
Un componente di navigazione a piè di pagina reattivo con un tema scuro, adatto per un sito web portfolio. Presenta una combinazione di colori monocromatici con diverse sfumature di un singolo colore, una complessità media con alcune funzionalità interattive e utilizza Tailwind CSS per lo stile, incluso il supporto della modalità oscura con il prefisso dark:.