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

Social-Media-Fußzeilenkomponente

Eine responsive Fußzeilenkomponente für Schnittstellen in sozialen Netzwerken, die nach den Prinzipien des Material Designs unter Verwendung eines monochromatischen blauen Farbschemas entwickelt wurde. Es bietet rasterbasierte Layouts, Tiefeneffekte (Schatten), Hover- und Übergangsanimationen für interaktive Elemente, ein Newsletter-Anmeldeformular, soziale Symbole, Benutzer-Avatare und Unterstützung des Dunkelmodus über den Dark:-Modifikator von Tailwind.

Offen

Footer-Komponente

Eine einfache Fußzeilenkomponente im Dunkelmodus für soziale Medien mit komplementärem Farbschema.

Offen

Footer-Komponente

Eine Fußzeilenkomponente, die im Neumorphism-Stil gestaltet wurde und responsive Effekte und dunkle Designs mit Tailwind CSS unterstützt.

Offen