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.
HTML Code
<div class="w-full max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">Search</h2>
<form class="flex flex-col space-y-4">
<input type="text" placeholder="Search..." class="p-4 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-600 transition duration-200" />
<div class="flex flex-wrap justify-between">
<select class="w-full md:w-auto p-2 rounded-lg border-2 border-gray-300 dark:border-gray-600 focus:outline-none dark:bg-gray-700 dark:text-white">
<option value="all">All</option>
<option value="images">Images</option>
<option value="videos">Videos</option>
<option value="users">Users</option>
</select>
<button class="flex items-center justify-center w-full md:w-auto p-3 bg-pink-500 dark:bg-pink-700 text-white rounded-lg shadow hover:bg-pink-600 dark:hover:bg-pink-800 transition duration-200">
<svg class="w-5 h-5 mr-2" 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-4a9 9 0 10-6 0 9 9 0 006 0z" />
</svg>
Search
</button>
</div>
</form>
<div class="mt-6 bg-gray-100 dark:bg-gray-900 p-4 rounded-lg border border-gray-300 dark:border-gray-600">
<h3 class="text-gray-700 dark:text-white mb-2">Featured Users</h3>
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
<span class="text-gray-700 dark:text-white">User1</span>
</div>
<div class="flex items-center space-x-3 mt-2">
<img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
<span class="text-gray-700 dark:text-white">User2</span>
</div>
<div class="flex items-center space-x-3 mt-2">
<img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
<span class="text-gray-700 dark:text-white">User3</span>
</div>
</div>
</div>Composants associés
Boîte de recherche 3D pastel simple
Un composant de champ de recherche réactif avec un design de type 3D, une palette de couleurs pastel et une prise en charge du thème sombre, conçu avec Tailwind CSS pour un site Web de blog/contenu.
Bauhaus_Agriculture_Search_Box
Composant de champ de recherche réactif pour les sites Web agricoles/agricoles, conçu avec les principes du Bauhaus, les tons sépia/brun et la prise en charge du mode sombre.
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.