Componente de navegación de pie de página
Un componente de navegación de pie de página de estilo neomorfismo complejo y receptivo para sitios web corporativos que utiliza un esquema de color en escala de grises con soporte para modo oscuro. Sin JavaScript.
Código HTML
<footer class="bg-gray-200 dark:bg-gray-800 py-10 px-5 neumorphism-light dark:neumorphism-dark">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-10">
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">About Us</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Careers</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Press</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Blog</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Products</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Features</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Pricing</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Integrations</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Status</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Resources</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Documentation</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Support</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Guides</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">API Reference</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">123 Corporate Ave, Suite 456<br>Business City, BC 78901</p>
<p class="text-gray-600 dark:text-gray-400 mb-2">Email: [email protected]</p>
<p class="text-gray-600 dark:text-gray-400">Phone: (123) 456-7890</p>
</div>
</div>
<div class="mt-10 border-t border-gray-300 dark:border-gray-700 pt-8 text-center text-gray-600 dark:text-gray-400">
<p>© 2023 Your Company. All rights reserved.</p>
</div>
</footer>
<style>
.neumorphism-light {
box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}
.neumorphism-dark {
box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 1a1a1a;
}
</style>Componentes relacionados
Comercio electrónico brutalista Footer Navigation
Navegación brutalista de pie de página de comercio electrónico con colores análogos, complejo, receptivo, soporte de modo oscuro, sin JS
Componente de navegación de pie de página
Un componente de navegación de pie de página complejo y receptivo diseñado para un mercado, con una interfaz de usuario de modo oscuro con un esquema de color en blanco y negro y un color de acento brillante (índigo). Incluye múltiples secciones para navegación, información de la empresa, enlaces legales y redes sociales, con soporte completo para el modo oscuro.
Componente de navegación de pie de página
Un componente de navegación de pie de página responsivo con un tema oscuro, adecuado para un sitio web de portafolio. Cuenta con un esquema de color monocromático con diferentes tonos de un solo color, complejidad media con algunas características interactivas y usa Tailwind CSS para el estilo, incluido el soporte del modo oscuro con el prefijo dark:.