CCHub Logo CCHub Tailwind Collection
Komponenten Fußzeile Glassmorphism-Fußzeilenkomponente

Glassmorphism-Fußzeilenkomponente

Eine reaktionsschnelle Fußzeilenkomponente im Glassmorphism-Stil mit mattglasähnlichen, durchscheinenden Elementen mit Unschärfeeffekten, die ein dunkles Design unterstützen.

Vorschau

HTML-Code 

<footer class="bg-white bg-opacity-30 backdrop-blur-md rounded-lg p-6 dark:bg-gray-800 dark:bg-opacity-30 transition duration-300 ease-in-out">
    <div class="container mx-auto">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="text-center md:text-left">
                <h2 class="text-xl font-bold text-gray-800 dark:text-white">Connect with Us</h2>
                <p class="text-gray-600 dark:text-gray-300">Stay updated with our latest news and offers.</p>
            </div>
            <div class="mt-4 md:mt-0">
                <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="rounded-full " /></a>
                <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="rounded-full " /></a>
                <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="rounded-full " /></a>
            </div>
        </div>
        <div class="flex justify-center mt-4">
            <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2">Privacy Policy</a>
            <span class="text-gray-500 dark:text-gray-300">|</span>
            <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2">Terms of Service</a>
        </div>
    </div>
</footer>

Verwandte Komponenten

Industrial_Candy_Footer_Component

Eine reaktionsschnelle Fußzeilenkomponente für ein Forum/eine Community-Plattform, die sich durch eine "industrielle" Ästhetik mit "Bonbons/süßen" Farbakzenten auszeichnet. Enthält Navigationslinks, Social-Media-Symbole, Urheberrecht und eine Newsletter-Anmeldung mit vollständiger Unterstützung des Dunkelmodus.

Offen

Footer-Komponente - Swiss Pastel Consulting

Eine saubere, minimalistische und reaktionsschnelle Fußzeilenkomponente mit Schweizer Designeinflüssen mit Pastellfarben und klarer Typografie, die sich für Beratungs-/Dienstleistungswebsites eignet. Enthält Unterstützung für den Dunkelmodus.

Offen

Footer-Komponente

Eine reaktionsschnelle Retro-/Vintage-Footer-Komponente für einen Blog mit triadischem Farbschema und Unterstützung für dunkle Themen.

Offen