CCHub Logo CCHub Tailwind Collection
Komponenten Suchfeld Suchfeld-Komponente

Suchfeld-Komponente

Eine reaktionsschnelle Suchfeld-Komponente, die in einem brutalistischen Stil mit Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS gestaltet wurde.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
    <div class="bg-gray-800 p-8 rounded-lg shadow-lg space-y-4">
        <h1 class="text-3xl font-bold text-center">Search</h1>
        <div class="flex items-center bg-gray-700 p-2 rounded-md">
            <input type="text" placeholder="Type to search..." class="flex-grow bg-transparent border-none text-white outline-none placeholder-gray-400" />
            <button class="ml-2 bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition duration-300">Go</button>
        </div>
        <div class="text-center">
            <img src="https://picsum.photos/200/100" alt="Placeholder image" class="w-full h-auto rounded-md mt-4">
        </div>
        <div class="flex items-center justify-between mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            <span class="text-sm">User Name</span>
        </div>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1F1F1F;
        }
        .bg-gray-800 {
            background-color: #2d2d2d;
        }
        .bg-gray-700 {
            background-color: #3e3e3e;
        }
    }
</style>

Verwandte Komponenten

Komponente des Glassmorphism-Suchfelds

Eine reaktionsschnelle Suchfeldkomponente im Glassmorphism-Stil mit Graustufenfarben, die für Blogs oder Content-Websites geeignet ist, mit einer mattglasähnlichen, durchscheinenden Eingabe und Schaltfläche. Enthält Unterstützung für den Dunkelmodus.

Offen

Suchfeld-Komponente

Eine responsive Suchfeld-Komponente, die nach den Prinzipien des Material Designs entwickelt wurde, mit Tailwind CSS-Stilen und Unterstützung für dunkle Themen.

Offen

Brutalistisches Suchfeld

Eine brutalistische Suchfeldkomponente für ein Dashboard mit komplementärem Farbschema und moderater Komplexität, mit responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen