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
Industrial_Food_Search_Box
Un composant de champ de recherche de style industriel réactif et à contraste élevé pour les sites Web d’alimentation/restaurant, avec des éléments exposés, une prise en charge du mode sombre et une complexité modérée.
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.
Composant de zone de recherche
Composant de boîte de recherche réactif avec prise en charge du thème sombre, palette de couleurs des tons de terre et design minimal.