Composants Navigation dans le pied de page Composant de navigation en pied de page

Composant de navigation en pied de page

Composant de navigation en pied de page avec mode sombre et effets réactifs

Aperçu

HTML Code

<footer class="bg-gray-900 text-gray-300 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h3 class="text-lg font-semibold text-white mb-2">Company</h3>
        <ul>
          <li><a href="#" class="hover:text-white">About Us</a></li>
          <li><a href="#" class="hover:text-white">Careers</a></li>
          <li><a href="#" class="hover:text-white">Press</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h3 class="text-lg font-semibold text-white mb-2">Products</h3>
        <ul>
          <li><a href="#" class="hover:text-white">Features</a></li>
          <li><a href="#" class="hover:text-white">Pricing</a></li>
          <li><a href="#" class="hover:text-white">Integrations</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h3 class="text-lg font-semibold text-white mb-2">Support</h3>
        <ul>
          <li><a href="#" class="hover:text-white">Help Center</a></li>
          <li><a href="#" class="hover:text-white">API Status</a></li>
          <li><a href="#" class="hover:text-white">Contact Us</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4">
        <h3 class="text-lg font-semibold text-white mb-2">Legal</h3>
        <ul>
          <li><a href="#" class="hover:text-white">Privacy Policy</a></li>
          <li><a href="#" class="hover:text-white">Terms of Service</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-8 border-t border-gray-700 pt-4 flex flex-col md:flex-row items-center justify-between">
      <p>&copy; 2023 Your Company. All rights reserved.</p>
      <div class="flex space-x-4 mt-4 md:mt-0">
        <a href="#" class="hover:text-white"><i class="fab fa-facebook"></i></a>
        <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a>
        <a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a>
      </div>
    </div>
  </div>
</footer>

Composants associés

Composant de navigation en pied de page

Un composant de navigation de pied de page réactif conçu pour les sites Web d’entreprise/d’entreprise en mode sombre, doté d’une palette de couleurs triadique et d’une complexité moyenne avec des fonctionnalités interactives.

Ouvrir

Navigation minimaliste dans le pied de page

Un composant de navigation en pied de page minimaliste pour les blogs avec un design réactif et une prise en charge du mode sombre.

Ouvrir

Composant de navigation en pied de page

Composant de navigation en pied de page avec conception Neumorphism, palette de couleurs monochromatique, complexité complexe et objectif de médias sociaux. Conception réactive avec prise en charge du thème sombre.

Ouvrir