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

Footer-Komponente

Eine einfache, reaktionsschnelle Fußzeilenkomponente im Retro-/Vintage-Stil mit Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS. Es verfügt über ein grundlegendes Layout, das für Geschäfts-/Unternehmenswebsites geeignet ist.

Offen

Neumorphe Fußzeilenkomponente

Eine Fußzeilenkomponente im Neumorphic-Stil für Social-Media-Schnittstellen mit lebendigen Farben und einem komplexen Layout, die den Dunkelmodus unterstützt.

Offen

Memphis_Purple_Entertainment_Footer_Component

Eine einfache Fußzeilenkomponente für Unterhaltungs-/Medienplattformen im Memphis-Designstil mit kräftigen lila-violetten Farben, geometrischen Elementen und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.

Offen