Komponenten Suchfeld Brutalistisches Suchfeld

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.

Vorschau

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 Retro-/Vintage-Suchfeld-Komponente, die mit Tailwind CSS gestaltet ist. Es bietet responsives Design, Unterstützung für dunkle Themen und Platzhalterbilder.

Offen

RetroSearchBox

Retro/Vintage-Suchfeld mit 80er/90er-Jahre-Ästhetik, reaktionsschnell, Unterstützung für den Dunkelmodus.

Offen

Skeuomorphes Suchfeld

Eine Suchfeldkomponente mit einem skeuomorphen Design, das reale Elemente nachahmt, mit Reaktionsfähigkeit und Unterstützung für dunkle Themen.

Offen