Navegación de pie de página

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:.

Abrir vista previa

                <footer class="bg-gray-900 text-white dark:bg-gray-900">
  <div class="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
    <div class="mb-8 flex justify-center">
      <a class="text-teal-400 dark:text-teal-300" href="/">
        <span class="sr-only">Home</span>
        <span class="text-2xl font-bold">YourPortfolio</span>
      </a>
    </div>
    <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
      <div>
        <p class="text-center text-base text-gray-400 dark:text-gray-500 lg:text-left">
          Showcasing innovative projects and creative solutions.
        </p>
        <p class="mt-4 text-center text-base text-gray-400 dark:text-gray-500 lg:text-left">
          © 2024 YourPortfolio. All rights reserved.
        </p>
      </div>
      <div class="col-span-2">
        <div class="grid grid-cols-1 gap-8 text-center sm:grid-cols-2 lg:grid-cols-3">
          <div>
            <p class="font-medium text-white dark:text-gray-200">Services</p>
            <nav class="mt-4 flex flex-col space-y-2">
              <a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Web Development</a>
              <a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">UI/UX Design</a>
              <a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Digital Marketing</a>
            </nav>
          </div>
          <div>
            <p class="font-medium text-white dark:text-gray-200">Company</p>
            <nav class="mt-4 flex flex-col space-y-2">
              <a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">About Us</a>
              <a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Careers</a>
              <a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Blog</a>
            </nav>
          </div>
          <div>
            <p class="font-medium text-white dark:text-gray-200">Contact</p>
            <nav class="mt-4 flex flex-col space-y-2">
              <a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Get in Touch</a>
              <a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Support</a>
              <a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">FAQ</a>
            </nav>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-16 border-t border-gray-800 pt-8 sm:items-center sm:justify-between sm:flex">
      <p class="text-center text-xs text-gray-500 dark:text-gray-600 sm:text-left">
        Designed and developed with ❤️
      </p>
      <ul class="mt-4 flex justify-center gap-6 sm:mt-0 lg:justify-end">
        <li>
          <a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
            <span class="sr-only">Facebook</span>
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
            </svg>
          </a>
        </li>
        <li>
          <a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
            <span class="sr-only">Instagram</span>
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
            </svg>
          </a>
        </li>
        <li>
          <a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
            <span class="sr-only">Twitter</span>
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
            </svg>
          </a>
        </li>
        <li>
          <a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
            <span class="sr-only">GitHub</span>
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
            </svg>
          </a>
        </li>
        <li>
          <a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
            <span class="sr-only">Dribbble</span>
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
            </svg>
          </a>
        </li>
      </ul>
    </div>
  </div>
</footer>

Componente de navegación de pie de página

Un componente de navegación de pie de página receptivo diseñado para un tablero, con un estilo skeuomórfico con colores vibrantes. Incluye enlaces de navegación, un logotipo e iconos de redes sociales, con soporte completo para el modo oscuro mediante Tailwind CSS. El diseño apunta a una complejidad moderada con efectos de desplazamiento interactivos.

Abrir vista previa

                
<footer class="bg-gradient-to-br from-gray-200 to-gray-400 text-gray-800 p-6 shadow-2xl relative overflow-hidden dark:from-gray-900 dark:to-gray-700 dark:text-gray-200">
  <!-- Background Ornaments for Skeuomorphism -->
  <div class="absolute inset-0 pointer-events-none">
    <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-gradient-to-br from-yellow-300 to-orange-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:from-yellow-600 dark:to-orange-700"></div>
    <div class="absolute top-1/2 right-1/4 w-32 h-32 bg-gradient-to-br from-pink-400 to-red-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:from-pink-700 dark:to-red-800"></div>
    <div class="absolute bottom-1/4 left-1/3 w-32 h-32 bg-gradient-to-br from-green-300 to-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:from-green-600 dark:to-blue-700"></div>
  </div>


  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center relative z-10">
    <!-- Logo Section -->
    <div class="mb-4 md:mb-0 transform hover:scale-105 transition duration-300">
      <a href="#" class="flex items-center space-x-3 3d-text">
        <!-- Skeuomorphic Logo Placeholder -->
        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg shadow-inner flex items-center justify-center p-2 dark:from-blue-700 dark:to-purple-800">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h4c0 0 0 0 0 0 0-1 0-2 0-3 0-4 0-5 0-6 0-1 0-2 0-3 0-4 0-5 0-6 0-1 0-2 0-3 0-4 0-5 0-6 0-1 0-2 0-3 0-4 0-5 0-6 0-1 M15 17l-1 1h-4c0 0 0 0 0 0v-4l4-4V7a2 2 0 00-2-2H9a2 2 0 00-2 2v4l-4 4V17a2 2 0 002 2h4l4-4z"></path></svg>
        </div>
        <span class="text-3xl font-extrabold text-gray-900 drop-shadow-lg dark:text-white">Dashboard</span>
      </a>
    </div>

    <!-- Navigation Links -->
    <nav class="mb-4 md:mb-0">
      <ul class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8 text-lg font-medium">
        <li><a href="#" class="hover:text-blue-600 transition duration-300 ease-in-out transform hover:-translate-y-1 block py-2 px-3 rounded-md active-link dark:hover:text-blue-400 3d-button">Home</a></li>
        <li><a href="#" class="hover:text-green-600 transition duration-300 ease-in-out transform hover:-translate-y-1 block py-2 px-3 rounded-md hover-effect-1 dark:hover:text-green-400 3d-button">Analytics</a></li>
        <li><a href="#" class="hover:text-purple-600 transition duration-300 ease-in-out transform hover:-translate-y-1 block py-2 px-3 rounded-md hover-effect-2 dark:hover:text-purple-400 3d-button">Reports</a></li>
        <li><a href="#" class="hover:text-orange-600 transition duration-300 ease-in-out transform hover:-translate-y-1 block py-2 px-3 rounded-md hover-effect-3 dark:hover:text-orange-400 3d-button">Settings</a></li>
      </ul>
    </nav>

    <!-- Social Media Icons -->
    <div class="flex space-x-4">
      <a href="#" class="text-gray-700 hover:text-blue-500 transform hover:scale-110 transition duration-300 dark:text-gray-300 dark:hover:text-blue-400 3d-icon">
        <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.873V14.89h-2.54V12h2.54V9.77c0-2.508 1.493-3.89 3.776-3.89 1.094 0 2.24.195 2.24.195v2.45h-1.24c-1.209 0-1.583.75-1.583 1.518V12h2.773l-.443 2.89h-2.33V22h5.517c3.544-.66 6.257-3.957 6.257-7.981C22 6.477 17.523 2 12 2z"></path></svg>
      </a>
      <a href="#" class="text-gray-700 hover:text-red-600 transform hover:scale-110 transition duration-300 dark:text-gray-300 dark:hover:text-red-500 3d-icon">
        <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.071 1.17.06 1.74.24 2.19.418.46.18.82.35 1.13.66.31.31.48.67.66 1.13.17.45.35 1.02.418 2.19.059 1.266.071 1.646.071 4.85s-.012 3.584-.071 4.85c-.06 1.17-.24 1.74-.418 2.19-.18.46-.35.82-.66 1.13-.31.31-.67.48-1.13.66-.45.17-.99.35-2.19.418-1.266.059-1.646.071-4.85.071s-3.584-.012-4.85-.071c-1.17-.06-1.74-.24-2.19-.418-.46-.18-.82-.35-1.13-.66-.31-.31-.48-.67-.66-1.13-.17-.45-.35-.99-.418-2.19-.059-1.266-.071-1.646-.071-4.85s.012-3.584.071-4.85c.06-1.17.24-1.74.418-2.19.18-.46.35-.82.66-1.13.31-.31.67-.48 1.13-.66.45-.17.99-.35 2.19-.418C8.416 2.175 8.796 2.163 12 2.163zm0 3.868c-3.34 0-6.04 2.7-6.04 6.04s2.7 6.04 6.04 6.04 6.04-2.7 6.04-6.04-2.7-6.04-6.04-6.04zM12 16.347c-2.4 0-4.347-1.946-4.347-4.347 0-2.4 1.946-4.347 4.347-4.347s4.347 1.946 4.347 4.347c0 2.4-1.946 4.347-4.347 4.347zm6.757-9.52c-.67 0-1.21-.54-1.21-1.21s.54-1.21 1.21-1.21 1.21.54 1.21 1.21-.54 1.21-1.21 1.21z"></path></svg>
      </a>
      <a href="#" class="text-gray-700 hover:text-blue-700 transform hover:scale-110 transition duration-300 dark:text-gray-300 dark:hover:text-blue-600 3d-icon">
        <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24"><path d="M22.46 6h-6.28l.8-.93c.18-.21.28-.48.28-.76a1.185 1.185 0 00-1.18-.54h-1.63c-.11-.06-.23-.1-.36-.12-.13-.02-.27-.03-.4-.03H3.61c-1.39 0-2 1.01-2 2.4V20h22.46c.86 0 1.54-.68 1.54-1.54v-10.45c0-.86-.68-1.54-1.54-1.54zm-2.46 8H5v-2h15v2zm0-4H5V8h15v2z"></path></svg>
      </a>
    </div>
  </div>

  <!-- Copyright and additional links -->
  <div class="mt-6 pt-4 border-t border-gray-300 text-center text-gray-600 text-sm dark:border-gray-600 dark:text-gray-400 relative z-10">
    <p>&copy; 2023 Dashboard Inc. All rights reserved.</p>
    <div class="flex justify-center space-x-4 mt-2">
      <a href="#" class="hover:underline hover:text-gray-800 dark:hover:text-gray-200">Privacy Policy</a>
      <a href="#" class="hover:underline hover:text-gray-800 dark:hover:text-gray-200">Terms of Service</a>
    </div>
  </div>

  <!-- Styles for Skeuomorphism and Vibrancy -->
  <style>
    @keyframes blob {
      0% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(30px, -50px) scale(1.1); }
      66% { transform: translate(-20px, 20px) scale(0.9); }
      100% { transform: translate(0, 0) scale(1); }
    }

    .animate-blob {
      animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    .animation-delay-2000 {
      animation-delay: 2s;
    }

    .animation-delay-4000 {
      animation-delay: 4s;
    }

    .3d-text {
      text-shadow: 1px 1px 0px rgba(255,255,255,0.7), 2px 2px 0px rgba(0,0,0,0.5);
      color: #333;
    }

    .dark .3d-text {
        text-shadow: 1px 1px 0px rgba(0,0,0,0.7), 2px 2px 0px rgba(255,255,255,0.2);
        color: #eee;
    }

    .3d-button {
        background-color: #d1d5db; /* Light gray */
        border-radius: 0.5rem;
        box-shadow: inset 0px 1px 0px rgba(255,255,255,0.8), 0px 3px 5px rgba(0,0,0,0.3), inset 0px -2px 0px rgba(0,0,0,0.15);
        transition: all 0.2s ease-in-out;
    }

    .3d-button:hover {
        transform: translateY(-2px);
        box-shadow: inset 0px 1px 0px rgba(255,255,255,0.9), 0px 5px 8px rgba(0,0,0,0.4), inset 0px -1px 0px rgba(0,0,0,0.2);
    }

    .dark .3d-button {
        background-color: #4a5568; /* Darker gray */
        box-shadow: inset 0px 1px 0px rgba(255,255,255,0.1), 0px 3px 5px rgba(0,0,0,0.7), inset 0px -2px 0px rgba(0,0,0,0.3);
    }

    .dark .3d-button:hover {
        transform: translateY(-2px);
        box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 5px 8px rgba(0,0,0,0.8), inset 0px -1px 0px rgba(0,0,0,0.4);
    }

    .3d-icon {
        filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
    }

    .dark .3d-icon {
        filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.7));
    }

    /* Specific vibrant color hover effects for navigation */
    .active-link {
      color: #3b82f6; /* blue-500 */
      font-weight: bold;
      text-shadow: 0px 0px 8px rgba(59, 130, 246, 0.6);
    }
    .dark .active-link {
      color: #60a5fa; /* blue-400 */
      text-shadow: 0px 0px 8px rgba(96, 165, 250, 0.6);
    }
  </style>
</footer>

Componente de navegación de pie de página

Un componente de navegación de pie de página responsivo diseñado con un estilo esqueuomórfico, con elementos interactivos adecuados para el comercio electrónico. Sigue un esquema de color triádico y admite el modo oscuro.

Abrir vista previa

                <footer class="bg-gray-100 dark:bg-gray-900 p-4 shadow-lg rounded-lg">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="flex items-center mb-4 md:mb-0">
            <img src="https://picsum.photos/50" alt="Logo" class="rounded-full mr-2">
            <h2 class="text-xl font-semibold dark:text-white">Shop Logo</h2>
        </div>
        <nav class="flex flex-col md:flex-row text-gray-600 dark:text-gray-300">
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">Home</a>
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">Products</a>
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">About Us</a>
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">Contact</a>
        </nav>
    </div>
    <div class="mt-4 text-center text-gray-600 dark:text-gray-300">
        <p>&copy; 2023 E-Commerce. All rights reserved.</p>
    </div>
</footer>

Componente de navegación de pie de página

Un componente de navegación de pie de página receptivo con un estilo de diseño retro / vintage, que utiliza colores vibrantes y se adapta a las interfaces de las redes sociales.

Abrir vista previa

                <footer class="bg-gradient-to-b from-purple-500 to-pink-600 dark:from-purple-900 dark:to-pink-800 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row justify-between items-center">
      <div class="text-white text-center mb-4 md:mb-0">
        <h2 class="text-2xl font-bold">Stay Connected</h2>
        <p class="text-sm">Follow us on our social channels</p>
      </div>
      <div class="flex space-x-4">
        <a href="https://facebook.com" class="text-white hover:underline">
          <img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="inline-block">
        </a>
        <a href="https://twitter.com" class="text-white hover:underline">
          <img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="inline-block">
        </a>
        <a href="https://instagram.com" class="text-white hover:underline">
          <img src="https://picsum.photos/30/30?random=3" alt="Instagram" class="inline-block">
        </a>
        <a href="https://linkedin.com" class="text-white hover:underline">
          <img src="https://picsum.photos/30/30?random=4" alt="LinkedIn" class="inline-block">
        </a>
      </div>
    </div>
  </div>
  <div class="text-center text-white text-sm mt-4">
    <p>&copy; 2023 Your Company. All rights reserved.</p>
  </div>
</footer>

Navegación minimalista por el pie de página

Un componente de navegación de pie de página minimalista para blogs con diseño responsivo y soporte para modo oscuro.

Abrir vista previa

                <footer class="bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row justify-between items-center">
      <div class="mb-4 md:mb-0">
        <p class="text-sm">&copy; 2023 Your Blog Name. All rights reserved.</p>
      </div>
      <nav>
        <ul class="flex space-x-4">
          <li><a href="#" class="text-sm hover:text-gray-900 dark:hover:text-white">Home</a></li>
          <li><a href="#" class="text-sm hover:text-gray-900 dark:hover:text-white">About</a></li>
          <li><a href="#" class="text-sm hover:text-gray-900 dark:hover:text-white">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
</footer>

Componente de navegación de pie de página

Un componente de navegación de pie de página simple diseñado en un estilo brutalista con un esquema de color triádico para interfaces de redes sociales. Incluye enlaces e imágenes de avatar, con soporte para modo oscuro.

Abrir vista previa

                <footer class="bg-gray-800 dark:bg-gray-900 text-white py-4">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="flex flex-col md:flex-row items-center">
            <img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mb-2 md:mb-0 md:mr-4">
            <ul class="flex space-x-4">
                <li><a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Home</a></li>
                <li><a href="#" class="hover:text-red-400 dark:hover:text-red-300">About</a></li>
                <li><a href="#" class="hover:text-green-400 dark:hover:text-green-300">Contact</a></li>
            </ul>
        </div>
        <div class="flex space-x-4 mt-4 md:mt-0">
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Facebook</a>
            <a href="#" class="hover:text-red-400 dark:hover:text-red-300">Twitter</a>
            <a href="#" class="hover:text-green-400 dark:hover:text-green-300">Instagram</a>
        </div>
    </div>
</footer>

Componente de navegación de pie de página

Un componente de navegación de pie de página receptivo para paneles con soporte de temas oscuros, con microinteracciones en los desplazamientos de enlaces con colores triádicos y elementos complejos. Sin JavaScript, solo HTML con Tailwind CSS.

Abrir vista previa

                <footer class="bg-blue-100 dark:bg-blue-900">
  <div class="container mx-auto px-6 py-8">
    <div class="flex flex-col items-center text-center">
      <div class="flex flex-wrap justify-center -mx-4">
        <a href="#" class="mx-4 text-sm text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-110">About</a>
        <a href="#" class="mx-4 text-sm text-red-800 dark:text-red-200 hover:text-red-600 dark:hover:text-red-400 transition duration-300 ease-in-out transform hover:scale-110">Blog</a>
        <a href="#" class="mx-4 text-sm text-yellow-800 dark:text-yellow-200 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-300 ease-in-out transform hover:scale-110">Careers</a>
        <a href="#" class="mx-4 text-sm text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-110">Contact Us</a>
      </div>
      <p class="mt-4 text-sm text-blue-800 dark:text-blue-200">&copy; 2023 Dashboard Inc. All rights reserved.</p>
    </div>
  </div>
</footer>

Componente de navegación de pie de página

Un componente de navegación de pie de página simple diseñado en estilo Glassmorphism con un esquema de color monocromático. Es responsivo, admite el modo oscuro y es adecuado para sitios web de comercio electrónico.

Abrir vista previa

                <footer class="bg-white bg-opacity-40 backdrop-blur-lg p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-50">
    <div class="container mx-auto flex flex-col sm:flex-row justify-between items-center">
        <div class="text-center sm:text-left">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Shop with Us</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">Your online shopping experience starts here.</p>
        </div>
        <div class="mt-4 sm:mt-0">
            <ul class="flex space-x-4">
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">Home</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">Products</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">About Us</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">Contact</a></li>
            </ul>
        </div>
    </div>
    <div class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
        <p>&copy; 2023 Your E-commerce. All rights reserved.</p>
    </div>
</footer>

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.

Abrir vista previa

                <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>&copy; 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>

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 vista previa

                <footer class="bg-gray-200 dark:bg-gray-800 py-8 px-4">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    <div class="neumorphic-card p-6 rounded-lg">
      <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">About Us</h3>
      <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et est in justo feugiat consectetur.</p>
    </div>
    <div class="neumorphic-card p-6 rounded-lg">
      <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Quick Links</h3>
      <ul class="space-y-2">
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Services</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
      </ul>
    </div>
    <div class="neumorphic-card p-6 rounded-lg">
      <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Follow Us</h3>
      <div class="flex space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-twitter"></i></a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-instagram"></i></a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-linkedin-in"></i></a>
      </div>
    </div>
  </div>
  <div class="mt-8 text-center text-gray-600 dark:text-gray-300">
    &copy; 2023 Your Company. All rights reserved.
  </div>

  <style>
    .neumorphic-card {
      background: #e0e0e0;
      box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
    }
    .dark .neumorphic-card {
        background: #333333;
        box-shadow: 7px 7px 15px #222222, -7px -7px 15px #444444;
    }
  </style>
</footer>

Categorías