CCHub Logo CCHub Tailwind Collection
Komponenten Kopfball 3D-Header-Komponente

3D-Header-Komponente

Eine komplexe, interaktive Header-Komponente, die für Social-Media-Schnittstellen entwickelt wurde und einen 3D-Stil mit Graustufenfarben verwendet. Es enthält ein Logo, eine Suchleiste, Benutzer-Avatare und Aktionsschaltflächen mit reaktionsschnellem Verhalten und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<header class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 flex items-center justify-between">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-lg">
        <h1 class="ml-3 text-gray-800 dark:text-white text-xl font-bold">Social Media App</h1>
    </div>
    <div class="flex-grow mx-4">
        <input type="text" placeholder="Search..." class="bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-shadow duration-300 shadow-md dark:shadow-lg" />
    </div>
    <div class="flex items-center">
        <button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300 p-2 rounded-lg shadow-md dark:shadow-lg mr-2">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="rounded-full w-8 h-8">
        </button>
        <button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300 p-2 rounded-lg shadow-md dark:shadow-lg">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar" class="rounded-full w-8 h-8">
        </button>
    </div>
</header>

Verwandte Komponenten

3D-Retro-Wetter-Header-Komponente

Eine komplexe Header-Komponente im Retro-Stil für eine Wetter-/Klimaanwendung mit 3D-Designelementen, einer gedämpften Farbpalette und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus. Es zeigt aktuelle Wetterinformationen, Standort, Datum und Navigation an.

Offen

Neon_Glow_Header_Component

Eine reaktionsschnelle Header-Komponente für SaaS-Anwendungen mit Neon-/Leuchteffekten und einem Bonbon-/Süßigkeiten-Farbschema mit Unterstützung für den Dunkelmodus und interaktiven Elementen.

Offen

Header-Komponente

Eine responsive Header-Komponente, die im Brutalismus-Stil mit einem pastellfarbenen Farbschema für einen Blog oder eine Content-Site gestaltet wurde und Unterstützung für dunkle Themen bietet.

Offen