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 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 dans un style brutaliste avec prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de zone de recherche
Composant de boîte de recherche avec conception 3D, effets réactifs et prise en charge du thème sombre.