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
Skeuomorphic_Grayscale_Business_Footer
Un componente de navegación de pie de página en escala de grises esqueumórfico y receptivo para sitios web comerciales/corporativos, compatible con el modo oscuro.
Componente de navegación de pie de página artístico de acuarela
Un componente de navegación de pie de página complejo y receptivo diseñado para sitios web sin fines de lucro/caridad, con un estilo artístico de acuarela con tonos suaves, sepia/marrón y soporte para modo oscuro. Incluye múltiples enlaces de navegación, iconos de redes sociales y una sección de derechos de autor.
Glassmorphism Escala de grises Healthcare Pie de página
Un componente de navegación de pie de página con capacidad de respuesta y estilo glassmorphism para aplicaciones médicas/de atención médica, que utiliza un esquema de color en escala de grises con soporte para modo oscuro. Cuenta con elementos translúcidos similares al vidrio esmerilado y enlaces interactivos.