Suchfeld-Komponente
Responsive Suchfeldkomponente mit Unterstützung für dunkle Themen, Farbschema in Erdtönen und minimalistischem Design.
HTML-Code
<form class="flex items-center w-full max-w-md mx-auto">
<label for="simple-search" class="sr-only">Search</label>
<div class="relative w-full">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
</div>
<input type="text" id="simple-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search" required>
</div>
<button type="submit" class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
<svg class="w-5 h-5" 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>
<span class="sr-only">Search</span>
</button>
</form>Verwandte Komponenten
Suchfeld-Komponente
Eine komplexe Suchfeldkomponente im Glassmorphism-Stil mit analogem Farbschema, die für ein Portfolio geeignet ist, mit responsivem Design und Unterstützung für dunkle Themen, die nur HTML und Tailwind CSS verwenden.
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.
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.