Componente Casella di ricerca
Componente della casella di ricerca con interfaccia utente in modalità scura, combinazione di colori monocromatica e complessità moderata per i social media utilizzando Tailwind CSS. Design reattivo con supporto per temi scuri.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8">
<div>
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
Search Your Friends
</h2>
</div>
<div class="mt-8 relative">
<input type="text" placeholder="Search..." class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md leading-5 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-md mt-4">
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="px-4 py-4 sm:px-6 flex items-center space-x-3">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 dark:text-white truncate">John Doe</p>
<p class="text-sm text-gray-500 dark:text-gray-400 truncate">@johndoe</p>
</div>
</li>
<li class="px-4 py-4 sm:px-6 flex items-center space-x-3">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 dark:text-white truncate">Jane Smith</p>
<p class="text-sm text-gray-500 dark:text-gray-400 truncate">@janesmith</p>
</div>
</li>
<li class="px-4 py-4 sm:px-6 flex items-center space-x-3">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 dark:text-white truncate">Peter Jones</p>
<p class="text-sm text-gray-500 dark:text-gray-400 truncate">@peterj</p>
</div>
</li>
</ul>
</div>
</div>
</div>Componenti correlati
Semplice casella di ricerca pastello 3D
Un componente casella di ricerca reattivo con un design simile al 3D, una combinazione di colori pastello e il supporto per temi scuri, creato con Tailwind CSS per un blog/sito Web di contenuti.
Componente della casella di ricerca Glassmorphism
Un moderno componente della casella di ricerca con un effetto vetro smerigliato (glassmorphism) che utilizza colori pastello. Il componente è semplice ma elegante, progettato per siti Web aziendali professionali. Presenta uno sfondo traslucido con sottili effetti di sfocatura, design reattivo e supporto per la modalità oscura. La casella di ricerca include un'icona di ricerca e un campo di input pulito che si adatta bene agli ambienti aziendali.
Casella di ricerca brutalista
Un componente della casella di ricerca brutalista per una dashboard, caratterizzato da una combinazione di colori complementari e complessità moderata, con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.