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
Pie de página de blog retro
Un componente de pie de página retro/vintage para un blog con una combinación de colores monocromática, un diseño sencillo, un diseño responsivo y compatibilidad con temas oscuros.
Pie de página vibrante neumórfico
Un componente de pie de página simple y receptivo diseñado con principios de diseño neumórfico y colores vibrantes. Presenta una apariencia suave y extruida con sombras sutiles mientras mantiene los colores de acento de alta saturación. El pie de página incluye secciones básicas para la navegación del sitio, enlaces sociales e información de derechos de autor con soporte completo para el modo oscuro.
Componente de pie de página
Un componente de pie de página responsivo simple diseñado en un estilo retro / vintage con soporte para temas oscuros, usando Tailwind CSS. Cuenta con un diseño básico adecuado para sitios web comerciales / corporativos.