Componente Casella di ricerca
Un componente della casella di ricerca progettato con lo stile Brutalism utilizzando Tailwind CSS. Presenta un design ad alto contrasto, effetti reattivi e supporta il tema scuro.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg p-6 shadow-lg w-full max-w-md">
<h2 class="text-xl font-bold text-gray-800 dark:text-white text-center mb-4">Search</h2>
<div class="flex items-center border-b border-gray-300 dark:border-gray-700 mb-4">
<input type="text" placeholder="Type your search..." class="flex-1 bg-transparent text-gray-800 dark:text-white p-2 outline-none" />
<button class="p-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700 text-white rounded-r-lg">
<span>🔍</span>
</button>
</div>
<img src="https://picsum.photos/400/200" class="w-full rounded-lg shadow-md" alt="Random image" />
<div class="flex justify-between mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full" alt="User Avatar" />
<img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-10 h-10 rounded-full" alt="User Avatar" />
</div>
<p class="text-gray-600 dark:text-gray-400 text-center mt-2">Explore and find information quickly.</p>
</div>
</div>Componenti correlati
Componente Casella di ricerca
Un componente della casella di ricerca in stile 3D progettato per siti Web aziendali e aziendali, dotato di un'interfaccia complessa con profondità, elementi interattivi e supporto per la modalità oscura.
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.
Componente Casella di ricerca
Un semplice componente della casella di ricerca progettato per le interfacce dei social media con supporto della modalità oscura e una combinazione di colori complementare.