CCHub Logo CCHub Tailwind Collection
Komponenten Fußzeilen-Navigation Komponente "Fußzeilennavigation"

Komponente "Fußzeilennavigation"

Footer Navigation Component for E-Commerce with Material Design - eine einfache Komponente mit Unterstützung für Responsive und Dark Mode mit einem komplementären Farbschema.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Minimalistische Footer-Navigation

Eine minimalistische Fußzeilennavigationskomponente für Blogs mit responsivem Design und Unterstützung für den Dunkelmodus.

Offen

Komponente "Fußzeilennavigation"

Eine reaktionsschnelle Fußzeilennavigationskomponente, die für Geschäfts-/Unternehmenswebsites im Dunkelmodus entwickelt wurde, mit einem triadischen Farbschema und mittlerer Komplexität mit interaktiven Funktionen.

Offen

Komponente "Fußzeilennavigation"

Eine einfache Fußzeilennavigationskomponente, die im brutalistischen Stil mit einem triadischen Farbschema für Social-Media-Schnittstellen gestaltet ist. Es enthält Links und Avatar-Bilder mit Unterstützung für den Dunkelmodus.

Offen