Composant de zone de recherche
Composant de zone de recherche avec interface utilisateur en mode sombre, schéma de couleurs monochromatique et complexité modérée pour les médias sociaux à l’aide de Tailwind CSS. Conception réactive avec prise en charge du thème sombre.
HTML Code
<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>Composants associés
Composant de zone de recherche
Un composant de champ de recherche de style 3D conçu pour les sites Web d’entreprise et d’entreprise, doté d’une interface complexe avec de la profondeur, des éléments interactifs et une prise en charge du mode sombre.
Boîte de recherche skeuomorphe
Un composant de champ de recherche avec un design skeuomorphe qui imite les éléments du monde réel, avec une réactivité et une prise en charge du thème sombre.
Composant de zone de recherche
Un composant de champ de recherche réactif pour les sites Web d’entreprise, doté de micro-interactions et d’une palette de couleurs analogue. Il comprend une entrée de recherche, un bouton et une liste déroulante de résultats dynamique avec des avatars d’utilisateur et du texte, prenant en charge le mode sombre.