Suchfeld-Komponente
Eine einfache Suchfeldkomponente im Retro-/Vintage-Stil, die für einen Blog oder den Konsum von Inhalten entwickelt wurde. Es verwendet ein monochromatisches Farbschema und reagiert mit Unterstützung für dunkle Themen.
HTML-Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-full max-w-md">
<h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Search</h2>
<div class="relative">
<input type="text" placeholder="Search..." class="block w-full px-4 py-2 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 border rounded-lg focus:outline-none focus:border-gray-500 dark:focus:border-gray-600" />
<div class="absolute inset-y-0 right-0 flex items-center pr-2">
<button class="bg-blue-500 dark:bg-blue-700 text-white rounded-lg p-2 hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3a8 8 0 11-8 8 8 8 0 018-8z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35" />
</svg>
</button>
</div>
</div>
</div>
</div>Verwandte Komponenten
Brutalistisches Suchfeld
Eine brutalistische Suchfeldkomponente mit leuchtenden Farben und Unterstützung für dunkle Themen.
Suchfeld für Materialdesign
Eine Suchfeld-Komponente, die von Material Design-Prinzipien inspiriert ist und mit Tailwind CSS erstellt wurde. Es bietet ein reaktionsschnelles Verhalten, das sich an die Containerbreite anpasst, visuelles Feedback durch Hover- und Fokusschattenübergänge (Tiefeneffekte) und eine umfassende Unterstützung für dunkle Themen. Die Komponente enthält ein führendes Suchsymbol und sorgt für eine saubere, moderne Ästhetik. Nur-CSS-Implementierung. Ideal zum Einbetten in verschiedene Layouts aufgrund seiner "W-Full"-Natur. Stellen Sie aus Gründen der Barrierefreiheit sicher, dass Sie das Element "input" mit einem entsprechenden "" koppeln <label>oder ein beschreibendes "aria-label" bereitstellen.
Suchfeld für Brutalismus
Suchfeld-Komponente im Brutalismus-Stil, reaktionsschnell, Unterstützung für dunkle Themen, kein JS. Verwendet picsum.photos für Bilder und randomuser.me für Avatare, falls erforderlich.