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.
HTML Code
<div class="max-w-md mx-auto">
<div class="relative">
<input type="text" class="w-full py-3 px-4 pr-10 text-sm text-gray-900 placeholder-gray-600 bg-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent border-2 border-gray-400 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:border-gray-600 dark:focus:ring-purple-400" placeholder="Search...">
<svg class="absolute right-3 top-3 w-5 h-5 text-gray-600 dark:text-gray-400" 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>
</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 boîte de recherche conçu avec le style Brutalism à l’aide de Tailwind CSS. Dispose d’un design à contraste élevé, d’effets réactifs et prend en charge le thème sombre.
Composant de zone de recherche
Un composant de boîte de recherche conçu avec un style skeuomorphe pour imiter une boîte de recherche du monde réel, à l’aide d’un schéma de couleurs triadique, adapté à un portefeuille et réactif avec la prise en charge du mode sombre.