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 responsive Suchfeldkomponente mit einem brutalistischen Design und einem komplementären Farbschema, das für Unternehmenswebsites geeignet ist.

Offen

Suchfeld-Komponente

Ein responsives Suchfeld mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS.

Offen

Retro Vintage Suchfeld

Eine reaktionsschnelle Suchfeld-Komponente, die im Retro-/Vintage-Stil gestaltet ist und ein analoges Farbschema verwendet, das für Social-Media-Schnittstellen geeignet ist, mit Unterstützung für dunkle Themen.

Offen