Componenti Navigazione a piè di pagina Componente di navigazione del piè di pagina

Componente di navigazione del piè di pagina

Componente di navigazione a piè di pagina per l'e-commerce con Material Design - un componente semplice con supporto per la modalità reattiva e scura, con una combinazione di colori complementare.

Anteprima

Codice HTML

<footer class="bg-gray-200 text-gray-700 py-8 dark:bg-gray-800 dark:text-gray-200">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <h3 class="text-lg font-semibold mb-4">Shop</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Men's</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Women's</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Kids'</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Sale</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold mb-4">About Us</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Our Story</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Careers</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Press</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold mb-4">Customer Service</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Contact Us</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Shipping Information</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Returns & Exchanges</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">FAQs</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-8 text-center text-sm">
      <p>&copy; 2023 Your E-commerce Store. All rights reserved.</p>
    </div>
  </div>
</footer>

Componenti correlati

Navigazione con piè di pagina di Glassmorphism

Componente di navigazione a piè di pagina con stile Glassmorphism, combinazione di colori vivaci e layout complesso per scopi di dashboard. Design reattivo con supporto per la modalità oscura utilizzando Tailwind CSS.

Aperto

Componente di navigazione del piè di pagina

Un componente di navigazione a piè di pagina complesso e reattivo progettato per un marketplace, con un'interfaccia utente in modalità scura con una combinazione di colori in bianco e nero e un colore principale brillante (indaco). Include più sezioni per la navigazione, le informazioni sull'azienda, i collegamenti legali e i social media, con supporto completo della modalità scura.

Aperto

Componente di navigazione del piè di pagina artistico dell'acquerello

Un componente di navigazione a piè di pagina complesso e reattivo progettato per siti Web senza scopo di lucro/di beneficenza, caratterizzato da uno stile artistico ad acquerello con toni tenui, seppia/marrone e supporto per la modalità scura. Include più link di navigazione, icone dei social media e una sezione sul copyright.

Aperto