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

Glassmorphism Fußzeile

Eine reaktionsschnelle Fußzeilenkomponente im Glassmorphism-Stil, mit mattglasähnlichen Effekten und Unterstützung für dunkle Designs mit Tailwind CSS.

Vorschau

HTML-Code 

<footer class="bg-white bg-opacity-30 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border-t border-gray-200 dark:border-gray-700 py-10">
    <div class="container mx-auto px-6">
        <div class="flex flex-col md:flex-row justify-between items-center text-center md:text-left">
            <div class="mb-4 md:mb-0">
                <h3 class="text-xl font-semibold">Your Company</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">Your slogan or tagline goes here.</p>
            </div>
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/50/50" alt="Random placeholder" class="rounded-full border border-gray-300 dark:border-gray-600">
                <p class="text-sm text-gray-600 dark:text-gray-400">Contact us: [email protected]</p>
            </div>
        </div>
        <div class="flex flex-col md:flex-row justify-center md:justify-between mt-8">
            <div class="mb-4 md:mb-0">
                <ul class="flex space-x-4">
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Home</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">About</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Services</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
                </ul>
            </div>
            <div>
                <p class="text-sm text-gray-600 dark:text-gray-400">© 2023 Your Company. All rights reserved.</p>
            </div>
        </div>
    </div>
</footer>

Verwandte Komponenten

Retro Blog Fußzeile

Eine Retro-/Vintage-Fußzeilenkomponente für einen Blog mit monochromatischem Farbschema, einfachem Layout, responsivem Design und Unterstützung für dunkle Themen.

Offen

3D-Fußzeile Einblendung

Responsive Fußzeile mit 3D-Designelementen und Unterstützung für den Dunkelmodus

Offen

Neumorphe lebendige Fußzeile

Eine einfache, reaktionsschnelle Fußzeilenkomponente, die mit neumorphen Designprinzipien und lebendigen Farben gestaltet ist. Es zeichnet sich durch ein weiches, extrudiertes Aussehen mit subtilen Schatten aus, während die Akzentfarben mit hoher Sättigung beibehalten werden. Die Fußzeile enthält grundlegende Abschnitte für die Website-Navigation, soziale Links und Copyright-Informationen mit vollständiger Unterstützung des Dunkelmodus.

Offen