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.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="relative w-full max-w-md">
<div class="relative flex items-center w-full h-12 rounded-lg shadow-lg bg-white dark:bg-gray-800 overflow-hidden group">
<div class="grid place-items-center h-full w-12 text-gray-300 dark:text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input
class="peer h-full w-full outline-none text-sm text-gray-700 dark:text-gray-200 pr-2 bg-white dark:bg-gray-800 transition-all duration-300 focus:w-[calc(100%-3rem)]"
type="text"
id="search-input"
placeholder="Search for services, products, or people..." />
<button class="absolute right-0 h-full w-12 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 text-white rounded-r-lg flex items-center justify-center transition-all duration-300 group-focus-within:w-24 group-focus-within:bg-blue-600 group-focus-within:dark:bg-blue-800">
<span class="hidden group-focus-within:block text-sm">Search</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 group-focus-within:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>
<!-- Search Results Dropdown -->
<div class="absolute w-full mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden opacity-0 scale-y-0 transform origin-top transition-all duration-300 group-focus-within:opacity-100 group-focus-within:scale-y-100">
<ul class="py-2">
<!-- Result Item 1 -->
<li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div>
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Software Engineer at TechCorp</p>
</div>
</li>
<!-- Result Item 2 -->
<li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
<div>
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Jane Smith</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Marketing Manager at GlobalBiz</p>
</div>
</li>
<!-- Result Item 3 -->
<li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
<div>
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Company XYZ Services</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Cloud Computing Solutions</p>
</div>
</li>
<!-- Result Item 4 -->
<li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
<img class="w-8 h-8 rounded-full mr-3" src="https://picsum.photos/id/1018/100/100" alt="Product Image">
<div>
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Product A</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Advanced Analytics Platform</p>
</div>
</li>
<!-- Result Item 5 -->
<li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
<img class="w-8 h-8 rounded-full mr-3" src="https://picsum.photos/id/1015/100/100" alt="Service Image">
<div>
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Consulting Services</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Strategic Business Consultation</p>
</div>
</li>
</ul>
</div>
</div>
</div>Composants associés
Composant de zone de recherche
Un composant de champ de recherche réactif conçu selon les principes de Material Design, avec des styles CSS Tailwind et la prise en charge du thème sombre.
Boîte de recherche brutaliste
Un composant de champ de recherche brutaliste avec des couleurs vives et la prise en charge du thème sombre.
Composant de boîte de recherche skeuomorphe
Boîte de recherche skeuomorphique pour les médias sociaux