Componente de navegación de pie de página de diseño 3D
Un componente de navegación de pie de página de estilo 3D con diseño responsivo y compatibilidad con el modo oscuro.
Código HTML
<footer class="bg-gray-100 dark:bg-gray-900 relative">
<div class="relative max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div class="relative z-10 grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="transform transition duration-500 hover:scale-105">
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Solutions</h3>
<ul role="list" class="mt-4 space-y-4">
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Marketing</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Analytics</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Commerce</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Insights</a></li>
</ul>
</div>
<div class="transform transition duration-500 hover:scale-105">
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
<ul role="list" class="mt-4 space-y-4">
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Pricing</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Documentation</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Guides</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">API Status</a></li>
</ul>
</div>
<div class="transform transition duration-500 hover:scale-105">
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
<ul role="list" class="mt-4 space-y-4">
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">About</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Blog</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Jobs</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Press</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Partners</a></li>
</ul>
</div>
<div class="transform transition duration-500 hover:scale-105">
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
<ul role="list" class="mt-4 space-y-4">
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Claim</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Privacy</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Terms</a></li>
</ul>
</div>
</div>
<div class="mt-8 border-t border-gray-300 dark:border-gray-700 pt-8 md:flex md:items-center md:justify-between">
<p class="text-base text-gray-500 dark:text-gray-400">© 2023 Your Company, Inc. All rights reserved.</p>
</div>
</div>
<div class="absolute top-0 left-0 w-full h-full overflow-hidden">
<div class="absolute bottom-0 right-0 transform translate-x-1/2 translate-y-1/2 w-64 h-64 rounded-full bg-blue-500 dark:bg-blue-700 opacity-20 blur-3xl"></div>
<div class="absolute top-0 left-0 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full bg-purple-500 dark:bg-purple-700 opacity-20 blur-3xl"></div>
</div>
</footer>
Componentes relacionados
Brutalist_Pastel_News_Footer
Un componente de navegación de pie de página complejo de estilo brutalista para sitios web de noticias/periodismo, con colores pastel, alto contraste y diseños inusuales. Es totalmente sensible y es compatible con el modo oscuro.
Pie de página de comercio electrónico retro/vintage
Componente de navegación de pie de página retro / vintage con tonos tierra, diseño simple, diseño receptivo y soporte de tema oscuro, para comercio electrónico.
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.