Champ de recherche Brutalisme
Composant de boîte de recherche avec style Brutalism, réactif, prise en charge du thème sombre, pas de JS. Utilise picsum.photos pour les images et randomuser.me pour les avatars si nécessaire.
HTML Code
<div class="max-w-md mx-auto">
<form class="flex items-center">
<label for="simple-search" class="sr-only">Search</label>
<div class="relative w-full">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
</div>
<input type="text" id="simple-search" class="bg-white dark:bg-gray-800 border border-black dark:border-white text-black dark:text-white text-sm font-mono focus:ring-black focus:border-black block w-full pl-10 p-2.5 transform -translate-x-1 -translate-y-1 dark:transform-none dark:translate-x-1 dark:translate-y-1 transition duration-100 ease-in-out" placeholder="Search anything..." required>
</div>
<button type="submit" class="p-2.5 ml-2 text-sm font-mono text-white bg-black border border-black hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 dark:bg-white dark:text-black dark:border-white dark:hover:bg-gray-200 dark:focus:ring-gray-800 transform translate-x-1 translate-y-1 dark:transform-none dark:-translate-x-1 dark:-translate-y-1 transition duration-100 ease-in-out">
<svg class="w-5 h-5" 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-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
<span class="sr-only">Search</span>
</button>
</form>
</div>Composants associés
Composant de zone de recherche
Un composant de boîte de recherche rétro/vintage stylisé avec Tailwind CSS. Il présente un design réactif, une prise en charge des thèmes sombres et des images de remplacement.
Boîte de recherche brutaliste
Un composant de champ de recherche brutaliste avec des couleurs vives et la prise en charge du thème sombre.
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.