Composant de zone de recherche
Un composant simple de champ de recherche de style rétro/vintage conçu pour un blog ou la consommation de contenu. Il utilise une palette de couleurs monochromatique et est réactif avec la prise en charge du thème sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-full max-w-md">
<h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Search</h2>
<div class="relative">
<input type="text" placeholder="Search..." class="block w-full px-4 py-2 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 border rounded-lg focus:outline-none focus:border-gray-500 dark:focus:border-gray-600" />
<div class="absolute inset-y-0 right-0 flex items-center pr-2">
<button class="bg-blue-500 dark:bg-blue-700 text-white rounded-lg p-2 hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3a8 8 0 11-8 8 8 8 0 018-8z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35" />
</svg>
</button>
</div>
</div>
</div>
</div>Composants associés
Boîte de recherche brutaliste
Un composant de champ de recherche brutaliste pour un tableau de bord, doté d’une palette de couleurs complémentaires et d’une complexité modérée, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
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.
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.