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.
HTML-Code
<div class="relative max-w-md mx-auto mt-10">
<input type="text" placeholder="Search..." class="w-full px-6 py-4 text-lg text-gray-800 bg-yellow-300 border-4 border-black focus:outline-none focus:border-red-600 dark:bg-yellow-600 dark:text-gray-200 dark:border-white dark:focus:border-red-800">
<svg class="absolute right-0 top-0 mt-4 mr-5 w-6 h-6 text-black dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>Verwandte Komponenten
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.
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.
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.