Search Components

Footer Navigation

Navigation links at the bottom of the page

Glassmorphism Grayscale Healthcare Footer

A responsive, glassmorphism-styled footer navigation component for healthcare/medical applications, using a grayscale color scheme with dark mode support. It features frosted glass-like translucent elements and interactive links.

Open Preview

                <footer class="relative overflow-hidden bg-white/50 backdrop-blur-md dark:bg-gray-900/50 dark:backdrop-blur-md py-12 md:py-16 border-t-2 border-gray-200 dark:border-gray-800">
  <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
    <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" stop-color="#e0e0e0"></stop>
          <stop offset="100%" stop-color="#f0f0f0"></stop>
        </radialGradient>
        <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" stop-color="#a0a0a0"></stop>
          <stop offset="100%" stop-color="#c0c0c0"></stop>
        </radialGradient>
      </defs>
      <circle cx="20" cy="30" r="30" fill="url(#grad1)" opacity="0.7" />
      <circle cx="80" cy="70" r="40" fill="url(#grad2)" opacity="0.7" />
    </svg>
  </div>

  <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
      <!-- Company Info -->
      <div class="space-y-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">MedCare Health</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
          Providing compassionate and advanced healthcare solutions for a healthier tomorrow.
        </p>
        <ul class="flex space-x-4">
          <li><a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors"><svg class="w-6 h-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.33V22h7.42c5.523 0 10-4.477 10-10Z" clip-rule="evenodd" /></svg></a></li>
          <li><a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c1.24 1.332 2.71 2.029 4.15 2.029 3.325 0 5.981-2.656 5.981-5.981 0-0.342-.033-0.678-.088-1.006 1.258-0.871 2.259-1.991 3.015-3.269-0.038 0.051-0.071 0.101-0.109 0.151-1.282 1.484-3.056 2.378-5.74 2.875 1.442-0.867 2.478-2.364 2.986-4.085-1.353 0.803-2.859 1.385-4.472 1.63-1.277-1.36-3.045-2.212-5.04-2.212-3.844 0-6.958 3.114-6.958 6.958 0 0.546 0.063 1.077 0.17 1.597-5.798-0.292-10.9-3.054-14.331-7.243-0.592 1.01-0.929 2.193-0.929 3.468 0 2.41 1.229 4.545 3.094 5.795-1.144-0.032-2.222-0.345-3.155-0.862v0.086c0 3.383 2.404 6.136 5.583 6.791-0.589 0.16-1.213 0.245-1.854 0.245-0.455 0-0.899-0.043-1.331-0.127 0.873 2.766 3.424 4.779 6.442 4.838-2.673 2.093-6.027 3.344-9.688 3.344-0.627 0-1.242-0.038-1.847-0.108 3.473 2.248 7.593 3.563 11.996 3.563Z" /></svg></a></li>
          <li><a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors"><svg class="w-6 h-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.418 2.865 8.163 6.838 9.504.5.092.682-.217.682-.483 0-.237-.007-.866-.012-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.068-.607.068-.607 1.002.07 1.536 1.03 1.536 1.03.892 1.527 2.342 1.085 2.91.829.091-.643.349-1.085.635-1.334-2.22-.25-4.555-1.11-4.555-4.943 0-1.09.39-1.978 1.029-2.674-.103-.251-.446-1.264.098-2.632 0 0 .84-.268 2.75 1.025A9.303 9.303 0 0 1 12 6.687c.85.006 1.7.117 2.502.324 1.908-1.293 2.747-1.025 2.747-1.025.544 1.368.201 2.381.098 2.632.64.696 1.029 1.584 1.029 2.674 0 3.842-2.339 4.689-4.566 4.935.359.307.678.915.678 1.846 0 1.334-.012 2.413-.012 2.74 0 .267.18.579.688.482C21.137 20.163 24 16.418 24 12c0-5.523-4.477-10-10-10Z" clip-rule="evenodd" /></svg></a></li>
        </ul>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Quick Links</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Our Services</a></li>
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Departments</a></li>
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Find a Doctor</a></li>
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Patient Resources</a></li>
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Careers</a></li>
        </ul>
      </div>

      <!-- Contact Info -->
      <div>
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Contact Us</h3>
        <ul class="space-y-3">
          <li class="flex items-start text-gray-600 dark:text-gray-300 text-sm">
            <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400 flex-shrink-0" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
            123 Health Ave, Suite 400, Medical City, MC 10001
          </li>
          <li class="flex items-center text-gray-600 dark:text-gray-300 text-sm">
            <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400 flex-shrink-0" 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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.95 4.81A3 3 0 0012.72 6h4.04a2 2 0 012 2.02v2.83a1 1 0 00.512.854l2.57 1.144a4 4 0 010 7.21l-2.57 1.144a1 1 0 00-.512.854v2.83a2 2 0 01-2 2.02h-4.04a3 3 0 00-1.77 0l-2.75 1.137a1 1 0 01-.948.684H5a2 2 0 01-2-2V5z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.875 17.5l-2.617-2.617a1 1 0 010-1.414l2.617-2.617a1 1 0 011.414 0l2.617 2.617a1 1 0 010 1.414l-2.617 2.617a1 1 0 01-1.414 0z"></path></svg>
            (555) 123-4567
          </li>
          <li class="flex items-center text-gray-600 dark:text-gray-300 text-sm">
            <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400 flex-shrink-0" 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="M3 8l7.893 5.262a2 2 0 002.214 0L21 8m-1 10a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h12a2 2 0 012 2v12z"></path></svg>
            [email protected]
          </li>
        </ul>
      </div>

      <!-- Newsletter/Appointment -->
      <div>
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Stay Connected</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Subscribe to our newsletter for health tips and updates.</p>
        <form class="flex flex-col sm:flex-row gap-2">
          <input type="email" placeholder="Your email" class="flex-grow px-4 py-2 rounded-lg bg-gray-100/70 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-800/70 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-gray-600 text-sm placeholder-gray-500 dark:placeholder-gray-400" aria-label="Email for newsletter">
          <button type="submit" class="px-5 py-2 rounded-lg bg-gray-800 text-white font-medium hover:bg-gray-700 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 transition-colors text-sm">Subscribe</button>
        </form>
        <p class="text-gray-600 dark:text-gray-300 text-sm mt-4">Need an appointment? <a href="#" class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100 transition-colors">Book Now</a></p>
      </div>
    </div>

    <div class="mt-12 md:mt-16 pt-8 border-t border-gray-300 dark:border-gray-700 text-center">
      <p class="text-gray-600 dark:text-gray-400 text-sm">&copy; 2023 MedCare Health. All rights reserved.</p>
    </div>
  </div>
</footer>

Industrial_Rainbow_Footer_Navigation

A simple, responsive footer navigation component with an industrial aesthetic, exposed elements, and a multi-color rainbow gradient background, tailored for finance/banking interfaces. Includes dark mode support.

Open Preview

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

Retro_Jewel_Tone_Dashboard_Footer_Navigation

A responsive footer navigation component for a dashboard, inspired by retro/vintage aesthetics with jewel tone colors (emerald, sapphire, ruby) and dark mode support. It includes navigation links, social media icons, and copyright information.

Open Preview

                <footer class="bg-gradient-to-r from-emerald-700 to-sapphire-800 text-white py-12 px-6 sm:px-8 lg:px-12 dark:from-emerald-950 dark:to-slate-900 border-t-4 border-emerald-500 dark:border-ruby-600 font-mono">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-10">
    
    <div class="col-span-1">
      <h3 class="text-2xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide uppercase">Retr<span class="text-emerald-300 dark:text-ruby-400">o</span>Dash</h3>
      <p class="text-emerald-100 text-sm leading-relaxed mb-4">
        Navigating the digital frontier with a nostalgic glance. Your trusted partner for insights from the past, presented for the future.
      </p>
      <div class="flex space-x-4">
        <a href="#" class="text-emerald-100 hover:text-ruby-300 transition-colors duration-300">
          <svg class="w-6 h-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.79c0-2.508 1.493-3.89 3.776-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.361 21.109 22 16.51 22 12z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-emerald-100 hover:text-ruby-300 transition-colors duration-300">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.31c9 0 13.92-7.55 13.92-13.92 0-.21 0-.42-.01-.63A10.02 10.02 0 0024 4.31a9.8 9.8 0 01-2.82.77A4.9 4.9 0 0023.23 2.7c.92-2.73-1.66-4.57-4.42-4.57-2.61 0-4.66 1.77-5.5 4.1-.11.29-.11.59-.11.89C13.2 5 8.7 5.76 5.2 3.25c-3.1 5.3-7.53 10.05-13.62 10.05v-.01c.21 0 .42 0 .63-.01A4.9 4.9 0 003.35 18a9.8 9.8 0 01-6.88 1.94c-1.39.06-2.76-.09-4.1-.42 9 0 13.93-7.55 13.93-13.92 0-.21 0-.42-.01-.63A10.02 10.02 0 0024 4.31a9.8 9.8 0 01-2.82.77A4.9 4.9 0 0023.23 2.7c.92-2.73-1.66-4.57-4.42-4.57-2.61 0-4.66 1.77-5.5 4.1-.11.29-.11.59-.11.89C13.2 5 8.7 5.76 5.2 3.25c-3.1 5.3-7.53 10.05-13.62 10.05v-.01c.21 0 .42 0 .63-.01A4.9 4.9 0 003.35 18a9.8 9.8 0 01-6.88 1.94c-1.39.06-2.76-.09-4.1-.42z" />
          </svg>
        </a>
        <a href="#" class="text-emerald-100 hover:text-ruby-300 transition-colors duration-300">
          <svg class="w-6 h-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.42 2.863 8.163 6.84 9.504.498.09.678-.216.678-.47v-1.68c-2.775.605-3.363-1.34-3.363-1.34-.455-1.157-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.006.07 1.532 1.026 1.532 1.026.892 1.53 2.34 1.085 2.91.83.09-.645.35-1.085.637-1.34-2.22-.253-4.555-1.11-4.555-4.912 0-1.087.388-1.974 1.029-2.672-.102-.253-.448-1.267.098-2.637 0 0 .84-.268 2.75 1.024A9.56 9.56 0 0112 6.844c.594 0 1.18.08 1.74.242 1.91-1.292 2.75-1.024 2.75-1.024.546 1.37.202 2.384.1 2.637.64.698 1.028 1.585 1.028 2.672 0 3.81-2.337 4.656-4.564 4.904.358.308.675.918.675 1.85V21c0 .254.18.56.678.47A9.995 9.995 0 0022 12c0-5.523-4.477-10-10-10z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <nav class="col-span-1 md:col-span-2 lg:col-span-1">
      <h3 class="text-xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide">Quick Links</h3>
      <ul class="space-y-4">
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Dashboard Home</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Data Overview</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Analytics Reports</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">User Settings</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Support & Help</a></li>
      </ul>
    </nav>

    <div class="col-span-1">
      <h3 class="text-xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide">Resources</h3>
      <ul class="space-y-4">
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Documentation</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">API Reference</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Blog & Articles</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Privacy Policy</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Terms of Service</a></li>
      </ul>
    </div>

    <div class="col-span-1">
      <h3 class="text-xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide">Contact Us</h3>
      <address class="not-italic text-emerald-100 text-sm space-y-2">
        <p class="flex items-center"><svg class="w-5 h-5 mr-3 text-ruby-300 dark:text-emerald-400" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>123 Pixel Blvd, Data City, 90210</p>
        <p class="flex items-center"><svg class="w-5 h-5 mr-3 text-ruby-300 dark:text-emerald-400" 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="M3 5a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-4l-4 4v-4H5a2 2 0 01-2-2v-8z"></path></svg>[email protected]</p>
        <p class="flex items-center"><svg class="w-5 h-5 mr-3 text-ruby-300 dark:text-emerald-400" 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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.592-1.555a2 2 0 012.288-.04l2.583 1.55A1 1 0 0121 11.69a2 2 0 01-2 2h-.096l-3.328 1.997a2 2 0 01-.734 3.323l-3.328 1.997a2 2 0 00-2.264 0l-3.328-1.997a2 2 0 01-.734-3.323L3.096 13.69A2 2 0 013 11.69V5z"></path></svg>+1 (555) RETRO-88</p>
      </address>
    </div>

  </div>
  
  <div class="border-t border-emerald-500/50 dark:border-ruby-700/50 pt-8 mt-10 text-center text-emerald-200 dark:text-slate-400 text-sm">
    <p>&copy; 2023 RetroDash. All rights reserved. <span class="hidden sm:inline">Embrace the past, power your future.</span></p>
  </div>
</footer>

Brutalist_Pastel_News_Footer

A complex, brutalist-style footer navigation component for news/journalism websites, featuring pastel colors, high contrast, and unusual layouts. It is fully responsive and supports dark mode.

Open Preview

                <footer class="bg-pink-100 text-purple-900 dark:bg-purple-900 dark:text-pink-100 font-mono border-t-8 border-r-8 border-b-8 border-l-8 border-purple-900 dark:border-pink-100 shadow-[10px_10px_0px_0px_rgba(109,40,217,0.7)] dark:shadow-[10px_10px_0px_0px_rgba(252,211,255,0.7)] transition-all duration-300">
  <div class="container mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12 lg:gap-16">
    
    <!-- Section 1: Logo and Tagline -->
    <div class="col-span-1 md:col-span-2 lg:col-span-1 flex flex-col items-start">
      <a href="#" class="text-4xl lg:text-5xl font-black tracking-tighter hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 uppercase transform -rotate-3 mb-4">
        The Squawk
      </a>
      <p class="text-sm lg:text-base font-bold leading-tight uppercase border-l-4 border-b-4 border-purple-900 dark:border-pink-100 pl-2 pb-1 bg-pink-200 dark:bg-purple-800 inline-block rotate-1">
        Unfiltered. Uncensored. Unequivocal.
      </p>
    </div>

    <!-- Section 2: Quick Links -->
    <div class="relative col-span-1 border-2 border-dashed border-purple-900 dark:border-pink-100 p-6 -rotate-1 hover:rotate-0 transform transition-transform duration-300">
      <h3 class="text-xl lg:text-2xl font-extrabold uppercase mb-4 tracking-tighter absolute -top-4 -left-4 bg-purple-900 text-pink-100 dark:bg-pink-100 dark:text-purple-900 px-3 py-1 border-r-4 border-b-4 border-pink-100 dark:border-purple-900">
        Explore
      </h3>
      <nav class="mt-6">
        <ul class="space-y-3">
          <li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">&#x27A1;</span> Breaking News</a></li>
          <li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">&#x27A1;</span> Investigations</a></li>
          <li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">&#x27A1;</span> Opinion Pieces</a></li>
          <li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">&#x27A1;</span> World Affairs</a></li>
          <li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">&#x27A1;</span> Local Report</a></li>
        </ul>
      </nav>
    </div>

    <!-- Section 3: Categories & Archives -->
    <div class="relative col-span-1 bg-purple-200 dark:bg-purple-700 p-6 transform rotate-2 hover:rotate-0 transition-transform duration-300 border-l-4 border-t-4 border-purple-900 dark:border-pink-100">
      <h3 class="text-xl lg:text-2xl font-extrabold uppercase mb-4 tracking-tighter absolute -bottom-4 -right-4 bg-purple-900 text-pink-100 dark:bg-pink-100 dark:text-purple-900 px-3 py-1 border-l-4 border-t-4 border-pink-100 dark:border-purple-900">
        Archives
      </h3>
      <nav class="grid grid-cols-2 gap-4 text-sm lg:text-base font-semibold uppercase">
        <ul class="space-y-2">
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Politics</a></li>
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Economy</a></li>
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Science</a></li>
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Culture</a></li>
        </ul>
        <ul class="space-y-2">
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Sports</a></li>
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Health</a></li>
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Technology</a></li>
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Environment</a></li>
        </ul>
      </nav>
    </div>

    <!-- Section 4: Contact & Social -->
    <div class="col-span-1 flex flex-col items-center md:items-end lg:items-start p-4 border-4 border-double border-purple-900 dark:border-pink-100 transform -rotate-2 hover:rotate-0 transition-transform duration-300">
      <h3 class="text-xl lg:text-2xl font-extrabold uppercase mb-4 text-center tracking-tighter bg-purple-900 leading-none p-2 text-pink-100 dark:bg-pink-100 dark:text-purple-900 border-b-4 border-r-4 border-pink-100 dark:border-purple-900">
        Get In Touch
      </h3>
      <address class="not-italic text-sm lg:text-base text-center md:text-right lg:text-left leading-relaxed mb-4">
        123 News Alley, Metropolis, NY 10001<br>
        <a href="mailto:[email protected]" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">[email protected]</a><br>
        <a href="tel:+15551234567" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">+1 (555) 123-4567</a>
      </address>
      <div class="flex space-x-4 mb-4">
        <a href="#" class="text-2xl hover:scale-125 transition-transform duration-200 transform rotate-6 hover:rotate-0"><span aria-label="Facebook">&#x1F4F0;</span></a>
        <a href="#" class="text-2xl hover:scale-125 transition-transform duration-200 transform -rotate-6 hover:rotate-0"><span aria-label="Twitter">&#x1F426;</span></a>
        <a href="#" class="text-2xl hover:scale-125 transition-transform duration-200 transform rotate-3 hover:rotate-0"><span aria-label="Instagram">&#x1F4F7;</span></a>
      </div>
      <img src="https://picsum.photos/id/1005/100/100" alt="Placeholder image" class="w-16 h-16 object-cover border-4 border-purple-900 dark:border-pink-100 rounded-lg transform -rotate-6 blur-[1px] hover:blur-none transition-all duration-300">
    </div>

  </div>

  <!-- Bottom Bar: Copyright & Impressum -->
  <div class="bg-purple-900 text-pink-100 dark:bg-pink-100 dark:text-purple-900 py-4 px-4 text-center text-xs font-bold uppercase tracking-wide border-t-8 border-purple-900 dark:border-pink-100 relative overflow-hidden">
    <p class="z-10 relative opacity-90">© 2023 THE SQUAWK. ALL RIGHTS RESERVED. <span class="hidden md:inline">A FREE PRESS INITIATIVE.</span></p>
    <a href="#" class="text-pink-300 dark:text-purple-700 hover:underline z-10 relative block md:inline-block md:ml-4 mt-1 md:mt-0">PRIVACY POLICY</a>
    <a href="#" class="text-pink-300 dark:text-purple-700 hover:underline z-10 relative block md:inline-block md:ml-4 mt-1 md:mt-0">TERMS OF SERVICE</a>
    <div class="absolute inset-0 bg-yellow-300 dark:bg-blue-300 opacity-20 transform -skew-x-12 scale-150 rotate-3 animate-pulse-slow pointer-events-none"></div>
  </div>
</footer>

<!-- Tailwind CSS extended configuration for custom animations (add to tailwind.config.js) -->
<style>
@keyframes bounce-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); /* Smaller bounce for subtle effect */}
}
.animate-bounce-y {
  animation: bounce-y 0.6s infinite alternate ease-in-out;
}

@keyframes pulse-slow {
  0%, 100% { opacity: 0.2; transform: -skew-x-12 scale-150 rotate(3); }
  50% { opacity: 0.4; transform: -skew-x-12 scale-155 rotate(5); }
}
.animate-pulse-slow {
  animation: pulse-slow 8s infinite ease-in-out;
}
</style>

Skeuomorphic_Grayscale_Business_Footer

A responsive, skeumorphic grayscale footer navigation component for business/corporate websites, supporting dark mode.

Open Preview

                <footer class="bg-gray-100 dark:bg-gray-900 border-t border-gray-300 dark:border-gray-700 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),inset_0_-1px_0_0_rgba(0,0,0,0.1)] dark:shadow-[inset_0_1px_0_0_rgba(0,0,0,0.2),inset_0_-1px_0_0_rgba(255,255,255,0.05)] pt-12 pb-8">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 text-gray-700 dark:text-gray-300">

      <!-- Company Info Section -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 border-b border-gray-300 dark:border-gray-700 pb-2 shadow-[0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[0_1px_0_0_rgba(0,0,0,0.2)]">
          <span class="block transform -translate-x-0.5 -translate-y-0.5">About Us</span>
        </h3>
        <p class="text-sm leading-relaxed mb-4">
          Providing innovative solutions with a commitment to excellence. We create value through technology and expertise.
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">
            <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.361 21.056 22 16.299 22 12z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12.996 9.832L14.77 2H18l-5.6 6.4L20 22h-4.432l-3.376-7.056L8 22H4l5.367-12.7L2 2H6.42l3.714 5.3L12.996 9.832zm-2.88 1.134l-.794-1.127L5.704 3H3.04l8.307 10.97L20.89 21h2.748L12.016 9.966l-1.905-.001z"/>
            </svg>
          </a>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">
            <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.484 2 12.017c0 4.425 2.865 8.18 6.83 9.504.475.083.677-.217.677-.48C9.51 20.259 9.51 18.665 9.51 16.03V15.03c0-1.076-.23-1.477-.45-1.74a.5.5 0 00-.09-.08c-.14-.07-.35-.14-.75-.14-.94 0-1.5-.94-.09-1.34.8-.4 1.25.1 1.25.1a1.9 1.9 0 00.94.31c.88 0 1.2-.18.94-.48-.68-.2-1.35-.61-1.35-.61C7.8 10.02 7.02 9.4 7.02 8.5c0-1.77 1.83-2.02 2.37-2.02.48 0 1.05.27 1.25.48a1.53 1.53 0 00.31-.05c.8-.08 1.5-.18 2-.18C14.73 5.48 15.65 6 15.65 7c0 .54-.2 1.48-.94 1.74a.5.5 0 00-.08.08c-.2.27-.45.67-.45 1.74v1.07c0 2.63.003 4.22.003 4.48 0 .26.2.56.677.48A10 10 0 0022 12.017C22 6.484 17.523 2 12 2z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Quick Links Section -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 border-b border-gray-300 dark:border-gray-700 pb-2 shadow-[0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[0_1px_0_0_rgba(0,0,0,0.2)]">
          <span class="block transform -translate-x-0.5 -translate-y-0.5">Quick Links</span>
        </h3>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Services</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Portfolio</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Team</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Blog</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Careers</a></li>
        </ul>
      </div>

      <!-- Resources Section -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 border-b border-gray-300 dark:border-gray-700 pb-2 shadow-[0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[0_1px_0_0_rgba(0,0,0,0.2)]">
          <span class="block transform -translate-x-0.5 -translate-y-0.5">Resources</span>
        </h3>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Support Center</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">FAQs</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Privacy Policy</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Terms of Service</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Site Map</a></li>
        </ul>
      </div>

      <!-- Contact Us Section -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 border-b border-gray-300 dark:border-gray-700 pb-2 shadow-[0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[0_1px_0_0_rgba(0,0,0,0.2)]">
          <span class="block transform -translate-x-0.5 -translate-y-0.5">Contact Us</span>
        </h3>
        <address class="not-italic text-sm space-y-2">
          <p class="flex items-center"><svg class="w-4 h-4 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M9.667 2.115C13.25 1.523 16.48.513 18.062 2.213A3.684 3.684 0 0020 5.467V16.5c0 .356-.125.688-.346.953A4.6 4.6 0 0117.5 19h-15C1.84 19 1 18.156 1 17V3.5C1 2.399 2.5 2 4.14 2 5.568 2 7.153 2.502 9.667 2.115zM5 9c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H6c-.552 0-1-.448-1-1zm5 0c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H11c-.552 0-1-.448-1-1zm5 0c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H16c-.552 0-1-.448-1-1zm-10 4c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H6c-.552 0-1-.448-1-1zm5 0c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H11c-.552 0-1-.448-1-1zm5 0c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H16c-.552 0-1-.448-1-1z" clip-rule="evenodd"></path></svg> 123 Business Rd, Suite 456</p>
          <p class="pl-6">City, State 12345</p>
          <p class="flex items-center"><svg class="w-4 h-4 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg> +1 (555) 123-4567</p>
          <p class="flex items-center"><svg class="w-4 h-4 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg> [email protected]</p>
        </address>
      </div>
    </div>

    <!-- Copyright and Logo Section -->
    <div class="mt-12 pt-8 text-center border-t border-gray-300 dark:border-gray-700 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[inset_0_1px_0_0_rgba(0,0,0,0.2)]">
      <div class="flex flex-col items-center justify-center space-y-4 md:flex-row md:space-y-0 md:space-x-8">
        <img src="https://picsum.photos/seed/companylogo/80/40" alt="Company Logo" class="w-20 h-10 object-contain filter grayscale invert dark:invert-0 shadow-[2px_2px_4px_rgba(0,0,0,0.2),-2px_-2px_4px_rgba(255,255,255,0.8)] dark:shadow-[2px_2px_4px_rgba(0,0,0,0.8),-2px_-2px_4px_rgba(255,255,255,0.1)] rounded-sm p-1">
        <p class="text-sm text-gray-600 dark:text-gray-400">&copy; 2023 Your Company, Inc. All rights reserved.</p>
      </div>
    </div>
  </div>
</footer>

Brutalist E-commerce Footer Navigation

Brutalist E-commerce Footer Navigation with Analogous Colors, Complex, Responsive, Dark Mode Support, No JS

Open Preview

                <footer class="bg-gray-900 text-purple-200 dark:bg-black dark:text-purple-300 py-12 px-6 font-mono border-t-8 border-purple-600 dark:border-purple-800">
    <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-12">
        
        <!-- About Section -->
        <div class="col-span-1 lg:col-span-2">
            <h3 class="text-3xl font-bold mb-6 text-purple-400">BRUTALIST SHOP</h3>
            <p class="text-lg leading-relaxed mb-6">Unapologetically bold and raw, we bring you an e-commerce experience unlike any other. Industrial aesthetics meet cutting-edge commerce.</p>
            <div class="flex space-x-6">
                <a href="#" class="text-purple-200 hover:text-purple-500 transition duration-300 text-3xl"><i class="fab fa-facebook-f"></i></a>
                <a href="#" class="text-purple-200 hover:text-purple-500 transition duration-300 text-3xl"><i class="fab fa-twitter"></i></a>
                <a href="#" class="text-purple-200 hover:text-purple-500 transition duration-300 text-3xl"><i class="fab fa-instagram"></i></a>
                <a href="#" class="text-purple-200 hover:text-purple-500 transition duration-300 text-3xl"><i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>

        <!-- Navigation Links 1 -->
        <div>
            <h3 class="text-xl font-bold mb-6 text-purple-400">SHOP</h3>
            <ul class="space-y-4 text-lg">
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">New Arrivals</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Bestsellers</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Unisex Collection</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Clearance</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Limited Editions</a></li>
            </ul>
        </div>

        <!-- Navigation Links 2 -->
        <div>
            <h3 class="text-xl font-bold mb-6 text-purple-400">CUSTOMER CARE</h3>
            <ul class="space-y-4 text-lg">
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Contact Us</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">FAQs</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Shipping & Returns</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Order Tracking</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Privacy Policy</a></li>
            </ul>
        </div>

        <!-- Newsletter Signup & Payment Methods -->
        <div>
            <h3 class="text-xl font-bold mb-6 text-purple-400">STAY RAW</h3>
            <p class="text-lg mb-6">Subscribe for irregular updates and exclusive drops directly to your inbox.</p>
            <form class="flex mb-6">
                <input type="email" placeholder="YOUR EMAIL..." class="px-5 py-3 w-full bg-gray-800 dark:bg-black border-2 border-purple-600 dark:border-purple-800 text-purple-200 dark:text-purple-300 focus:outline-none focus:border-purple-400 placeholder-purple-400" />
                <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white dark:bg-purple-800 dark:hover:bg-purple-900 px-6 py-3 font-bold transition duration-300 border-2 border-purple-600 dark:border-purple-800">JOIN</button>
            </form>
            
            <h4 class="text-xl font-bold mb-4 text-purple-400">ACCEPTED METHODS</h4>
            <div class="flex flex-wrap gap-4 text-4xl">
                <i class="fab fa-cc-visa text-purple-300"></i>
                <i class="fab fa-cc-mastercard text-purple-300"></i>
                <i class="fab fa-cc-amex text-purple-300"></i>
                <i class="fab fa-paypal text-purple-300"></i>
            </div>
        </div>

    </div>

    <div class="text-center mt-12 pt-8 border-t-4 border-purple-700 dark:border-purple-900 text-purple-400 text-lg">
        <p>&copy; <span id="currentYear"></span> BRUTALIST SHOP. All Rights Reserved. Embrace the Grit.</p>
    </div>
</footer>

<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Brutalism E-commerce Footer Navigation

A simple, brutalist footer navigation component for e-commerce, with pastel colors and dark mode support.

Open Preview

                <footer class="bg-pink-100 text-purple-900 p-4 dark:bg-purple-900 dark:text-pink-100">
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
    <div class="mb-4 md:mb-0">
      <h2 class="text-2xl font-bold uppercase tracking-wider">ShopNow</h2>
    </div>
    <nav class="flex space-x-6">
      <a href="#" class="text-lg uppercase hover:underline">Products</a>
      <a href="#" class="text-lg uppercase hover:underline">About</a>
      <a href="#" class="text-lg uppercase hover:underline">Contact</a>
      <a href="#" class="text-lg uppercase hover:underline">Privacy</a>
    </nav>
  </div>
</footer>

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>