Footer Navigation

Footer Navigation Component

A responsive footer navigation component with a dark theme, suitable for a portfolio website. It features a monochromatic color scheme with different shades of a single color, medium complexity with some interactive features, and uses Tailwind CSS for styling, including dark mode support with the dark: prefix.

Open Preview

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

Footer Navigation Component

A responsive footer navigation component designed for a dashboard, featuring a Skeuomorphic style with vibrant colors. It includes navigation links, a logo, and social media icons, with full dark mode support using Tailwind CSS. The design aims for a moderate complexity with interactive hover effects.

Open Preview

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

Footer Navigation Component

A responsive Footer Navigation component designed with a skeuomorphic style, featuring interactive elements suitable for e-commerce. It follows a triadic color scheme and supports dark mode.

Open Preview

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

Footer Navigation Component

A responsive footer navigation component with a retro/vintage design style, using vibrant colors and tailored for social media interfaces.

Open Preview

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

Minimalist Footer Navigation

A minimalist footer navigation component for blogs with responsive design and dark mode support.

Open Preview

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

Footer Navigation Component

A simple footer navigation component designed in a Brutalist style with a triadic color scheme for social media interfaces. It includes links and avatar images, with dark mode support.

Open Preview

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

Footer Navigation Component

A responsive footer navigation component for dashboards with dark theme support, featuring microinteractions on link hovers using triadic colors and complex elements. No JavaScript, only HTML with Tailwind CSS.

Open Preview

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

Footer Navigation Component

A simple footer navigation component designed in Glassmorphism style with a monochromatic color scheme. It is responsive, supports dark mode, and is suitable for e-commerce websites.

Open Preview

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

Footer Navigation Component

A responsive and complex Neumorphism-styled Footer Navigation Component for corporate websites using a grayscale color scheme with dark mode support. No JavaScript.

Open Preview

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

Footer Navigation Component

Footer Navigation Component with Neumorphism design, Monochromatic color scheme, Complex complexity, and Social Media purpose. Responsive design with dark theme support.

Open Preview

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

Categories