Pie de página de Glassmorphism
Un componente de pie de página responsivo diseñado con estilo de cristal, con efectos similares al vidrio esmerilado y soporte para temas oscuros con Tailwind CSS.
Código HTML
<footer class="bg-white bg-opacity-30 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border-t border-gray-200 dark:border-gray-700 py-10">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center text-center md:text-left">
<div class="mb-4 md:mb-0">
<h3 class="text-xl font-semibold">Your Company</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Your slogan or tagline goes here.</p>
</div>
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Random placeholder" class="rounded-full border border-gray-300 dark:border-gray-600">
<p class="text-sm text-gray-600 dark:text-gray-400">Contact us: [email protected]</p>
</div>
</div>
<div class="flex flex-col md:flex-row justify-center md:justify-between mt-8">
<div class="mb-4 md:mb-0">
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">About</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Services</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
</ul>
</div>
<div>
<p class="text-sm text-gray-600 dark:text-gray-400">© 2023 Your Company. All rights reserved.</p>
</div>
</div>
</div>
</footer>Componentes relacionados
Componente de pie de página de redes sociales
Un componente de pie de página responsivo para interfaces de redes sociales, diseñado con los principios de Material Design utilizando un esquema de color azul monocromático. Cuenta con diseños basados en cuadrículas, efectos de profundidad (sombras), animaciones de desplazamiento y transición para elementos interactivos, un formulario de suscripción al boletín, íconos sociales, avatares de usuario y soporte para el modo oscuro a través del modificador dark: de Tailwind.
Componente de pie de página
Un componente de pie de página simple y receptivo con elementos de diseño 3D y tonos tierra, diseñado para un blog o sitio de contenido con soporte para temas oscuros.
Componente de pie de página
Un componente de pie de página neumórfico para un sitio web de blog/contenido, esquema de color monocromático, con soporte para modo oscuro. Es un componente moderadamente complejo. Es responsivo.