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.
HTML Code
<div class="relative max-w-md mx-auto mt-10">
<input type="text" placeholder="Search..." class="w-full px-6 py-4 text-lg text-gray-800 bg-yellow-300 border-4 border-black focus:outline-none focus:border-red-600 dark:bg-yellow-600 dark:text-gray-200 dark:border-white dark:focus:border-red-800">
<svg class="absolute right-0 top-0 mt-4 mr-5 w-6 h-6 text-black dark:text-white" 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>
</div>Composants associés
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 avec un design minimaliste/plat, une palette de couleurs vives et des interactions complexes, adapté aux sites Web d’entreprise. Il prend en charge le mode sombre et est construit avec Tailwind CSS.
Neon_Glow_Search_Box
Un composant de champ de recherche simple et réactif avec des effets de lueur néon en bleu électrique et en rose vif pour les applications technologiques/SaaS, y compris la prise en charge du mode sombre.