Suchfeld-Komponente
Eine komplexe Suchfeld-Komponente, die im brutalistischen Stil mit einem pastellfarbenen Farbschema gestaltet ist und auf Social-Media-Schnittstellen zugeschnitten ist. Die Komponente enthält interaktive Elemente wie Sucheingaben, Filter und eine Schaltfläche zum Senden, die alle den Dunkelmodus unterstützen.
HTML-Code
<div class="w-full max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">Search</h2>
<form class="flex flex-col space-y-4">
<input type="text" placeholder="Search..." class="p-4 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-600 transition duration-200" />
<div class="flex flex-wrap justify-between">
<select class="w-full md:w-auto p-2 rounded-lg border-2 border-gray-300 dark:border-gray-600 focus:outline-none dark:bg-gray-700 dark:text-white">
<option value="all">All</option>
<option value="images">Images</option>
<option value="videos">Videos</option>
<option value="users">Users</option>
</select>
<button class="flex items-center justify-center w-full md:w-auto p-3 bg-pink-500 dark:bg-pink-700 text-white rounded-lg shadow hover:bg-pink-600 dark:hover:bg-pink-800 transition duration-200">
<svg class="w-5 h-5 mr-2" 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-4a9 9 0 10-6 0 9 9 0 006 0z" />
</svg>
Search
</button>
</div>
</form>
<div class="mt-6 bg-gray-100 dark:bg-gray-900 p-4 rounded-lg border border-gray-300 dark:border-gray-600">
<h3 class="text-gray-700 dark:text-white mb-2">Featured Users</h3>
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
<span class="text-gray-700 dark:text-white">User1</span>
</div>
<div class="flex items-center space-x-3 mt-2">
<img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
<span class="text-gray-700 dark:text-white">User2</span>
</div>
<div class="flex items-center space-x-3 mt-2">
<img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
<span class="text-gray-700 dark:text-white">User3</span>
</div>
</div>
</div>Verwandte Komponenten
Bauhaus_Agriculture_Search_Box
Responsive Suchfeldkomponente für Landwirtschafts-/Landwirtschafts-Websites, gestaltet mit Bauhaus-Prinzipien, Sepia-/Brauntönen und Unterstützung für den Dunkelmodus.
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-Komponente
Eine minimalistische und flache Design-Suchfeldkomponente mit einem pastellfarbenen Farbschema, einer komplexen Benutzeroberfläche mit mehreren interaktiven Elementen, die für ein Portfolio entwickelt wurde, in dem Arbeiten oder Produkte präsentiert werden.