Componente Casella di ricerca
Un componente della casella di ricerca progettato con uno stile scheumorfico per imitare una casella di ricerca del mondo reale, utilizzando una combinazione di colori triadica, adatto a un portfolio e reattivo con il supporto della modalità oscura.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="relative w-full max-w-md">
<input type="text" placeholder="Search..."
class="w-full p-4 pl-10 pr-4 text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700"/>
<div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a7 7 0 100 14 7 7 0 000-14zM16.293 16.293a8 8 0 111.414-1.414l4.281 4.283-1.414 1.414-4.282-4.283z" />
</svg>
</div>
</div>
</div>Componenti correlati
Componente Casella di ricerca
Componente Casella di ricerca reattiva con supporto per temi scuri, combinazione di colori dei toni della Terra e design minimale.
Casella di ricerca Brutalismo
Componente della casella di ricerca con stile Brutalism, reattivo, supporto per temi scuri, senza JS. Utilizza picsum.photos per le immagini e randomuser.me per gli avatar, se necessario.
Scatola di ricerca retrò
Casella di ricerca retrò / vintage con estetica anni '80 / '90, reattiva e supporto per la modalità oscura.