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

Komponente "Fußzeilennavigation"

Eine reaktionsschnelle und komplexe Fußzeilennavigationskomponente im Neumorphism-Stil für Unternehmenswebsites, die ein Graustufen-Farbschema mit Unterstützung für den Dunkelmodus verwenden. Kein JavaScript.

Vorschau

HTML-Code 

<footer class="bg-gray-200 dark:bg-gray-800 py-10 px-5 neumorphism-light dark:neumorphism-dark">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-10">
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Company</h3>
      <ul class="space-y-2">
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">About Us</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Careers</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Press</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Blog</a></li>
      </ul>
    </div>
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Products</h3>
      <ul class="space-y-2">
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Features</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Pricing</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Integrations</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Status</a></li>
      </ul>
    </div>
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Resources</h3>
      <ul class="space-y-2">
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Documentation</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Support</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Guides</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">API Reference</a></li>
      </ul>
    </div>
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact</h3>
      <p class="text-gray-600 dark:text-gray-400 mb-4">123 Corporate Ave, Suite 456<br>Business City, BC 78901</p>
      <p class="text-gray-600 dark:text-gray-400 mb-2">Email: [email protected]</p>
      <p class="text-gray-600 dark:text-gray-400">Phone: (123) 456-7890</p>
    </div>
  </div>
  <div class="mt-10 border-t border-gray-300 dark:border-gray-700 pt-8 text-center text-gray-600 dark:text-gray-400">
    <p>&copy; 2023 Your Company. All rights reserved.</p>
  </div>
</footer>

<style>
.neumorphism-light {
  box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}

.neumorphism-dark {
  box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 1a1a1a;
}
</style>

Verwandte Komponenten

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

Footer-Navigationskomponente - Industrieller Ozean

Eine komplexe, reaktionsschnelle Fußzeilennavigationskomponente im industriellen Stil mit Ozean-/Blau-Farbschema, geeignet für Event-/Konferenz-Websites. Enthält mehrspaltige Links, Social-Media-Symbole, Urheberrecht und Unterstützung für den Dunkelmodus.

Offen

Komponente "Fußzeilennavigation"

Eine Navigationskomponente für die Fußzeile, die im Retro-/Vintage-Stil gestaltet ist und von der Ästhetik der 80er und 90er Jahre inspiriert ist. Es verfügt über eine Unterstützung für dunkle Themen und ist vollständig reaktionsschnell.

Offen