Navigazione a piè di pagina

Componente di navigazione del piè di pagina

Un componente di navigazione a piè di pagina reattivo con un tema scuro, adatto per un sito web portfolio. Presenta una combinazione di colori monocromatici con diverse sfumature di un singolo colore, una complessità media con alcune funzionalità interattive e utilizza Tailwind CSS per lo stile, incluso il supporto della modalità oscura con il prefisso dark:.

Apri anteprima

                <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 di navigazione del piè di pagina

Un componente di navigazione a piè di pagina reattivo progettato per un cruscotto, caratterizzato da uno stile Skeuomorphic con colori vivaci. Include collegamenti di navigazione, un logo e icone dei social media, con supporto completo della modalità oscura utilizzando Tailwind CSS. Il design mira a una complessità moderata con effetti di hover interattivi.

Apri anteprima

                
<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 di navigazione del piè di pagina

Un componente di navigazione a piè di pagina reattivo progettato con uno stile scheumorfico, con elementi interattivi adatti all'e-commerce. Segue una combinazione di colori triadici e supporta la modalità scura.

Apri anteprima

                <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 di navigazione del piè di pagina

Un componente di navigazione a piè di pagina reattivo con uno stile di design retrò/vintage, che utilizza colori vivaci e su misura per le interfacce dei social media.

Apri anteprima

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

Navigazione minimalista a piè di pagina

Un componente di navigazione a piè di pagina minimalista per blog con design reattivo e supporto per la modalità scura.

Apri anteprima

                <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 di navigazione del piè di pagina

Un semplice componente di navigazione a piè di pagina progettato in stile brutalista con una combinazione di colori triadica per le interfacce dei social media. Include collegamenti e immagini avatar, con supporto per la modalità oscura.

Apri anteprima

                <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 di navigazione del piè di pagina

Un componente di navigazione a piè di pagina reattivo per dashboard con supporto per temi scuri, con microinterazioni sui passaggi del mouse sui collegamenti utilizzando colori triadici ed elementi complessi. Niente JavaScript, solo HTML con Tailwind CSS.

Apri anteprima

                <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 di navigazione del piè di pagina

Un semplice componente di navigazione a piè di pagina progettato in stile Glassmorphism con una combinazione di colori monocromatica. È reattivo, supporta la modalità oscura ed è adatto per i siti di e-commerce.

Apri anteprima

                <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 di navigazione del piè di pagina

Un componente di navigazione a piè di pagina reattivo e complesso in stile neumorfismo per siti Web aziendali che utilizza una combinazione di colori in scala di grigi con supporto della modalità scura. Niente JavaScript.

Apri anteprima

                <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 di navigazione del piè di pagina

Componente di navigazione a piè di pagina con design del neumorfismo, combinazione di colori monocromatici, complessità complessa e scopo dei social media. Design reattivo con supporto per temi scuri.

Apri anteprima

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

Categorie