Componente de navegación de pie de página
Un componente de navegación de pie de página receptivo con un estilo de morfismo de vidrio con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque. Es compatible con el modo oscuro e incluye imágenes de marcador de posición.
Código HTML
<footer class="bg-white bg-opacity-30 backdrop-blur-lg dark:bg-gray-900 dark:bg-opacity-30 py-8">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full">
<span class="text-lg font-bold text-gray-800 dark:text-gray-200">Your Company</span>
</div>
<nav class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6 mt-4 md:mt-0">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">About</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Services</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Contact</a>
</nav>
</div>
<div class="mt-6 text-center">
<p class="text-gray-500 dark:text-gray-400">© 2023 Your Company. All rights reserved.</p>
</div>
</div>
</footer>Componentes relacionados
Componente de navegación de pie de página
Un componente de navegación de pie de página receptivo para paneles con soporte de temas oscuros, con microinteracciones en los desplazamientos de enlaces con colores triádicos y elementos complejos. Sin JavaScript, solo HTML con Tailwind CSS.
Industrial_Rainbow_Footer_Navigation
Un componente de navegación de pie de página simple y receptivo con una estética industrial, elementos expuestos y un fondo degradado de arco iris multicolor, diseñado para interfaces financieras / bancarias. Incluye soporte para modo oscuro.
Componente de navegación de pie de página
Componente de navegación de pie de página para comercio electrónico con Material Design: un componente simple con soporte de modo responsivo y oscuro, con un esquema de color complementario.