Componentes Navegación de pie de página Industrial_Rainbow_Footer_Navigation

Industrial_Rainbow_Footer_Navigation

Un componente de navegación de pie de página simple y receptivo con una estética industrial, elementos expuestos y un fondo degradado de arco iris multicolor, diseñado para interfaces financieras / bancarias. Incluye soporte para modo oscuro.

Vista previa

Código HTML

<footer class="bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 dark:from-gray-900 dark:via-zinc-800 dark:to-stone-700 p-4 text-white uppercase tracking-wider font-mono shadow-inner border-t-2 border-l-2 border-r-2 border-b-8 border-gray-700 dark:border-gray-950">
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
    <div class="text-sm text-gray-100 dark:text-gray-400 opacity-80">
      <p>&copy; 2023 Nexus Bank Co. All Rights Reserved.</p>
      <p class="mt-1">Built with raw power and precision.</p>
    </div>
    <nav class="flex flex-wrap justify-center space-x-4 sm:space-x-6">
      <a href="#" class="text-sm hover:text-gray-200 dark:hover:text-gray-300 transition-colors duration-200
                          border-b border-white hover:border-gray-200 dark:border-gray-500 dark:hover:border-gray-300
                          pb-1">About Us</a>
      <a href="#" class="text-sm hover:text-gray-200 dark:hover:text-gray-300 transition-colors duration-200
                          border-b border-white hover:border-gray-200 dark:border-gray-500 dark:hover:border-gray-300
                          pb-1">Services</a>
      <a href="#" class="text-sm hover:text-gray-200 dark:hover:text-gray-300 transition-colors duration-200
                          border-b border-white hover:border-gray-200 dark:border-gray-500 dark:hover:border-gray-300
                          pb-1">Pricing</a>
      <a href="#" class="text-sm hover:text-gray-200 dark:hover:text-gray-300 transition-colors duration-200
                          border-b border-white hover:border-gray-200 dark:border-gray-500 dark:hover:border-gray-300
                          pb-1">Security</a>
      <a href="#" class="text-sm hover:text-gray-200 dark:hover:text-gray-300 transition-colors duration-200
                          border-b border-white hover:border-gray-200 dark:border-gray-500 dark:hover:border-gray-300
                          pb-1">Support</a>
    </nav>
  </div>
</footer>

Componentes relacionados

Componente de navegación de pie de página

Componente de navegación de pie de página con diseño de neumorfismo, combinación de colores monocromática, complejidad compleja y propósito de redes sociales. Diseño responsivo con soporte para temas oscuros.

Abrir

3D_Music_Footer_Navigation

Un complejo componente de navegación de pie de página inspirado en 3D para plataformas de música/audio, con neutros cálidos y capacidad de respuesta total con soporte para modo oscuro.

Abrir

Componente de navegación de pie de página

Un componente de navegación de pie de página receptivo diseñado para sitios web comerciales/corporativos en modo oscuro, con un esquema de color triádico y complejidad media con funciones interactivas.

Abrir