CCHub Logo CCHub Tailwind Collection
Komponenten Suchfeld Suchfeld-Komponente

Suchfeld-Komponente

Eine responsive Suchfeldkomponente mit einem brutalistischen Design und einem komplementären Farbschema, das für Unternehmenswebsites geeignet ist.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-800 dark:bg-gray-900">
    <h1 class="text-4xl font-bold text-white mb-4">Find What You Need</h1>
    <div class="flex items-center border-b-2 border-yellow-400 dark:border-blue-400">
        <input type="text" placeholder="Search..." class="p-2 bg-gray-700 dark:bg-gray-800 text-yellow-400 dark:text-blue-400 placeholder-yellow-300 placeholder-opacity-50 dark:placeholder-blue-300 dark:placeholder-opacity-50 outline-none w-full" />
        <button class="bg-yellow-400 dark:bg-blue-400 text-gray-900 dark:text-white font-bold p-2 ml-2 hover:bg-yellow-500 dark:hover:bg-blue-500 transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Search" class="w-4 h-4 inline-block" />
        </button>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200" alt="Random Image" class="w-full max-w-md rounded-lg shadow-lg" />
    </div>
</div>

Verwandte Komponenten

Suchfeld-Komponente

Eine Suchfeldkomponente im 3D-Stil, die für Geschäfts- und Unternehmenswebsites entwickelt wurde und eine komplexe Benutzeroberfläche mit Tiefe, interaktiven Elementen und Unterstützung für den Dunkelmodus bietet.

Offen

Suchfeld-Komponente

Eine responsive Suchfeldkomponente für Unternehmens-/Unternehmenswebsites mit Mikrointeraktionen und einem analogen Farbschema. Es enthält eine Sucheingabe, eine Schaltfläche und ein Dropdown-Menü für dynamische Ergebnisse mit Benutzer-Avataren und Text, die den Dunkelmodus unterstützen.

Offen

Komponente des Glassmorphism-Suchfelds

Eine moderne Suchfeldkomponente mit einem Milchglaseffekt (Glasmorphismus) unter Verwendung von Pastellfarben. Die Komponente ist einfach, aber elegant und wurde für professionelle Business-Websites entwickelt. Es verfügt über einen durchscheinenden Hintergrund mit subtilen Unschärfeeffekten, responsivem Design und Unterstützung für den Dunkelmodus. Das Suchfeld enthält ein Suchsymbol und ein sauberes Eingabefeld, das sich gut in Unternehmensumgebungen einfügt.

Offen