CCHub Logo CCHub Tailwind Collection
Komponenten Suchfeld Suchfeld-Komponente

Suchfeld-Komponente

Eine Suchfeldkomponente, die mit einem skeuomorphen Stil entworfen wurde, um ein reales Suchfeld nachzuahmen, mit einem triadischen Farbschema, geeignet für ein Portfolio und reaktionsschnell mit Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">  
    <div class="relative w-full max-w-md">  
        <input type="text" placeholder="Search..."  
            class="w-full p-4 pl-10 pr-4 text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700"/>  
        <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-600">  
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">  
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a7 7 0 100 14 7 7 0 000-14zM16.293 16.293a8 8 0 111.414-1.414l4.281 4.283-1.414 1.414-4.282-4.283z" />  
            </svg>  
        </div>  
    </div>  
</div>

Verwandte Komponenten

Suchfeld-Komponente

Eine minimalistische Suchfeld-Komponente, die mit Tailwind CSS entwickelt wurde, mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen

3D_Candy_SearchBox_Manufacturing

Eine reaktionsschnelle, von 3D inspirierte Suchfeldkomponente mit bonbonfarbenen/süßen Farben, die sich für Fertigungs-/Industrieanwendungen eignet, mit einem subtilen Schatteneffekt und interaktiven Elementen.

Offen

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