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
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.
Componente de navegación de pie de página
Un componente de navegación a pie de página diseñado en un estilo retro/vintage inspirado en la estética de los años 80 y 90. Cuenta con un soporte de tema oscuro y es totalmente responsivo.
Componente de navegación de pie de página 38
Un componente de navegación de pie de página responsivo diseñado con un estilo skeuomórfico para imitar elementos del mundo real, con soporte para temas oscuros y uso de Tailwind CSS. Este componente incluye enlaces, imágenes de marcador de posición y avatares.