Componente Casella di ricerca
Un componente della casella di ricerca reattivo progettato con i principi del Material Design, con stili CSS Tailwind e supporto per temi scuri.
Codice HTML
<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>Componenti correlati
Componente Casella di ricerca
Un complesso componente della casella di ricerca progettato in stile brutalista con una combinazione di colori pastello, su misura per le interfacce dei social media. Il componente include elementi interattivi come l'input di ricerca, i filtri e un pulsante di invio, che supportano la modalità oscura.
Casella di ricerca skeuomorfa
Un componente della casella di ricerca con un design scheumorfico che imita gli elementi del mondo reale, con reattività e supporto per temi scuri.
Componente Casella di ricerca
Un semplice componente della casella di ricerca in stile retrò/vintage progettato per un blog o per il consumo di contenuti. Utilizza una combinazione di colori monocromatica ed è reattivo con il supporto del tema scuro.