CCHub Logo CCHub Tailwind Collection
Komponenten Fußzeilen-Navigation Glassmorphism Fußzeilennavigation

Glassmorphism Fußzeilennavigation

Fußzeilennavigationskomponente mit Glassmorphism-Stil, lebendigem Farbschema und komplexem Layout für Dashboard-Zwecke. Responsives Design mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS.

Vorschau

HTML-Code 

<footer class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-pink-500 text-white dark:bg-blue-500 dark:bg-opacity-20 dark:text-gray-200 py-8">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
      <div class="col-span-2 md:col-span-1">
        <h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Company</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">About Us</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Careers</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Partnerships</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Press</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Products</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Features</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Pricing</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Integrations</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">API</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Resources</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Blog</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Documentation</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Support</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Community</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Legal</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Privacy Policy</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Terms of Service</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Cookie Policy</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-8 border-t border-indigo-300 dark:border-indigo-700 pt-6 text-center text-sm">
      <p>&copy; 2023 Your Company. All rights reserved.</p>
    </div>
  </div>
</footer>

Verwandte Komponenten

Aquarell Künstlerische Fußzeilen-Navigationskomponente

Eine komplexe, reaktionsschnelle Fußzeilennavigationskomponente, die für gemeinnützige/wohltätige Websites entwickelt wurde, mit einem künstlerischen Aquarellstil mit weichen Sepia-/Brauntönen und Unterstützung für den Dunkelmodus. Enthält mehrere Navigationslinks, Social-Media-Symbole und einen Copyright-Bereich.

Offen

Bauhaus_Retro_News_Footer

Komplexe, reaktionsschnelle Fußzeilennavigationskomponente für Nachrichten-/Journalismus-Websites mit einem vom Bauhaus inspirierten Design mit geometrischen Formen und einer Retro-/Vintage-Farbpalette, einschließlich Unterstützung des Dunkelmodus.

Offen

Komponente "Fußzeilennavigation"

Eine einfache, reaktionsschnelle Fußzeilennavigationskomponente mit einem warmen, vom Sonnenuntergang inspirierten Farbschema, das für Mode- und Beauty-Marken entwickelt wurde. Verfügt über subtile Hover-Effekte und Unterstützung für den Dunkelmodus.

Offen