Rechercher des composants

Catégories

Composants Navigation dans le pied de page

Navigation dans le pied de page

Liens de navigation en bas de page

Glassmorphism Niveaux de gris Soins de santé Footer

Un composant de navigation de pied de page réactif, de style glassmorphism, pour les applications médicales/de santé, utilisant un schéma de couleurs en niveaux de gris avec prise en charge du mode sombre. Il comporte des éléments translucides givrés ressemblant à du verre et des liens interactifs.

Ouvrir Aperçu

                <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

Un composant de navigation en pied de page simple et réactif avec une esthétique industrielle, des éléments exposés et un arrière-plan dégradé arc-en-ciel multicolore, conçu pour les interfaces finance/banque. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Un composant de navigation en pied de page réactif pour un tableau de bord, inspiré de l’esthétique rétro/vintage avec des couleurs de bijoux (émeraude, saphir, rubis) et la prise en charge du mode sombre. Il comprend des liens de navigation, des icônes de médias sociaux et des informations sur les droits d’auteur.

Ouvrir Aperçu

                <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

Il s’agit d’un composant complexe de navigation de pied de page de style brutaliste pour les sites d’actualités et de journalisme, avec des couleurs pastel, un contraste élevé et des mises en page inhabituelles. Il est entièrement réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <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

Composant de navigation en niveaux de gris réactif et skeeumorphe pour les sites Web d’entreprise, prenant en charge le mode sombre.

Ouvrir Aperçu

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

Brutalisme E-commerce Footer Navigation

Navigation brutaliste dans le pied de page du commerce électronique avec des couleurs analogues, complexe, réactif, prise en charge du mode sombre, pas de JS

Ouvrir Aperçu

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

Brutalisme E-commerce Footer Navigation

Un composant de navigation de pied de page simple et brutaliste pour le commerce électronique, avec des couleurs pastel et la prise en charge du mode sombre.

Ouvrir Aperçu

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

Composant de navigation en pied de page

Un composant de navigation de pied de page réactif avec un thème sombre, adapté à un site web de portfolio. Il présente une palette de couleurs monochromatique avec différentes nuances d’une seule couleur, une complexité moyenne avec quelques fonctionnalités interactives, et utilise Tailwind CSS pour le style, y compris la prise en charge du mode sombre avec le préfixe dark :.

Ouvrir Aperçu

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

Composant de navigation en pied de page

Un composant de navigation de pied de page réactif conçu pour un tableau de bord, avec un style Skeuomorphic avec des couleurs vives. Il comprend des liens de navigation, un logo et des icônes de médias sociaux, avec une prise en charge complète du mode sombre à l’aide de Tailwind CSS. La conception vise une complexité modérée avec des effets de vol stationnaire interactifs.

Ouvrir Aperçu

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

Composant de navigation en pied de page

Un composant de navigation en pied de page réactif conçu avec un style skeuomorphe, avec des éléments interactifs adaptés au commerce électronique. Il suit un schéma de couleurs triadique et prend en charge le mode sombre.

Ouvrir Aperçu

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