CCHub Logo CCHub Tailwind Collection
Komponenten Fußzeile Neumorphe Fußzeilenkomponente

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.

Vorschau

HTML-Code 

<footer class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-2xl">
    <div class="flex flex-col items-center">
        <div class="flex space-x-6 mb-4">
            <a href="#" class="bg-blue-500 dark:bg-blue-700 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=1" alt="Facebook" class="h-8 w-8 rounded-full">
            </a>
            <a href="#" class="bg-blue-400 dark:bg-blue-600 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=2" alt="Twitter" class="h-8 w-8 rounded-full">
            </a>
            <a href="#" class="bg-red-500 dark:bg-red-700 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=3" alt="Instagram" class="h-8 w-8 rounded-full">
            </a>
            <a href="#" class="bg-purple-500 dark:bg-purple-700 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=4" alt="LinkedIn" class="h-8 w-8 rounded-full">
            </a>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-2">© 2023 Your Company</p>
        <p class="text-gray-500 dark:text-gray-400 text-xs">Follow us on social media!</p>
    </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

Skeuomorphe Fußzeilenkomponente

Responsive Footer-Komponente mit skeuomorphem Design, analogem Farbschema (Grün, Blau-Grün) und moderater Komplexität, geeignet für Unternehmenswebsites. Enthält Links, einen Logo-Platzhalter und einen subtilen Skeuomorphie-Effekt, der mit Schatten und Farbverläufen erzielt wird. Unterstützt den Hell- und Dunkelmodus.

Offen

Footer-Komponente

Eine Fußzeilenkomponente, die in einem skeuomorphen Stil mit einem triadischen Farbschema und moderater Komplexität entworfen wurde und für ein Blog-/Content-Layout geeignet ist.

Offen