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.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="relative w-full max-w-md">
<input type="text" placeholder="Search..."
class="w-full p-4 pl-10 pr-4 text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700"/>
<div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a7 7 0 100 14 7 7 0 000-14zM16.293 16.293a8 8 0 111.414-1.414l4.281 4.283-1.414 1.414-4.282-4.283z" />
</svg>
</div>
</div>
</div>Composants associés
Composant de zone de recherche
Un composant de boîte de recherche complexe de style Glassmorphism avec une palette de couleurs analogue, adapté à un portfolio, avec un design réactif et une prise en charge du thème sombre utilisant uniquement HTML et Tailwind CSS.
Composant de zone de recherche
Un composant de champ de recherche réactif conçu avec le style glassmorphism, prenant en charge le mode sombre et adapté aux applications de commerce électronique.
Boîte de recherche skeuomorphe
Un composant de champ de recherche avec un design skeuomorphe qui imite les éléments du monde réel, avec une réactivité et une prise en charge du thème sombre.