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.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg p-6 shadow-lg w-full max-w-md">
<h2 class="text-xl font-bold text-gray-800 dark:text-white text-center mb-4">Search</h2>
<div class="flex items-center border-b border-gray-300 dark:border-gray-700 mb-4">
<input type="text" placeholder="Type your search..." class="flex-1 bg-transparent text-gray-800 dark:text-white p-2 outline-none" />
<button class="p-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700 text-white rounded-r-lg">
<span>🔍</span>
</button>
</div>
<img src="https://picsum.photos/400/200" class="w-full rounded-lg shadow-md" alt="Random image" />
<div class="flex justify-between mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full" alt="User Avatar" />
<img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-10 h-10 rounded-full" alt="User Avatar" />
</div>
<p class="text-gray-600 dark:text-gray-400 text-center mt-2">Explore and find information quickly.</p>
</div>
</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 conçu avec le style glassmorphism, prenant en charge le mode sombre et adapté aux applications de commerce électronique.
Composant de zone de recherche
Composant de zone de recherche en mode sombre avec conception réactive et prise en charge du thème sombre. Aucun JavaScript n’est utilisé. Les images sont des images de substitution.