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 la boîte de recherche de jeux
Un composant de champ de recherche réactif et simple pour les sites Web de jeux, inspiré des principes de conception du Bauhaus avec une palette de couleurs forêt/vert et la prise en charge du mode sombre.
Industrial_Candy_SearchBox
Un composant de champ de recherche modérément complexe et réactif avec une esthétique industrielle mais de couleur bonbon, conçu pour les sites Web d’entreprise professionnels, avec prise en charge du mode sombre.
Champ de recherche inspiré de la nature biologique
Un composant de champ de recherche simple et réactif avec un design organique, inspiré de la nature et un dégradé arc-en-ciel, adapté aux sites Web d’entreprise ou d’entreprise. Inclut la prise en charge du mode sombre.