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
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.
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 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.