Composant de zone de recherche
Composant de zone de recherche en mode sombre avec conception réactive et prise en charge du thème sombre. Aucun JavaScript n’est utilisé. Les images sont des images de substitution.
HTML Code
<form class="flex items-center w-full max-w-md mx-auto mt-10">
<label for="simple-search" class="sr-only">Search</label>
<div class="relative w-full">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
</div>
<input type="text" id="simple-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search" required>
</div>
<button type="submit" class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
<span class="sr-only">Search</span>
</button>
</form>Composants associés
Composant de zone de recherche
Un composant de champ de recherche complexe conçu dans un style brutaliste avec une palette de couleurs pastel, adapté aux interfaces de médias sociaux. Le composant comprend des éléments interactifs tels que la saisie de recherche, des filtres et un bouton d’envoi, tous prenant en charge le mode sombre.
Boîte de recherche rétro
Boîte de recherche rétro/vintage avec esthétique des années 80/90, réactif, prise en charge du mode 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.