Komponenten Suchfeld Suchfeld-Komponente

Suchfeld-Komponente

Eine responsive Suchfeld-Komponente, die nach den Prinzipien des Material Designs entwickelt wurde, mit Tailwind CSS-Stilen und Unterstützung für dunkle Themen.

Vorschau

HTML-Code

<div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 w-96">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 text-center">Search</h2>
        <div class="relative">
            <input type="text" placeholder="Search..." class="block w-full px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-md border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 transition duration-150 ease-in-out" />
            <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-150 ease-in-out">Search</button>
        </div>
        <div class="mt-4 text-center">
            <h3 class="text-gray-700 dark:text-gray-300">Looking for something specific?</h3>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Type and hit enter or click the search button.</p>
        </div>
    </div>
</div>

Verwandte Komponenten

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.

Offen