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.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Search</h2>
<div class="relative">
<input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Type your query..." />
<button class="absolute inset-y-0 right-0 flex items-center px-4 text-white bg-blue-600 hover:bg-blue-700 rounded-r-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a7 7 0 100 14 7 7 0 000-14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35" />
</svg>
</button>
</div>
</div>
<div class="mt-10 flex">
<img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-lg shadow-md" />
<img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-lg shadow-md ml-4" />
</div>
<div class="mt-6 flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md" />
<p class="ml-2 text-gray-800 dark:text-white">User Name</p>
</div>
</div>Composants associés
Composant de la boîte de recherche Glassmorphism
Un composant de boîte de recherche moderne avec un effet de verre dépoli (glassmorphism) utilisant des couleurs pastel. Le composant est simple mais élégant, conçu pour les sites Web d’entreprise professionnels. Il présente un arrière-plan translucide avec des effets de flou subtils, un design réactif et une prise en charge du mode sombre. La boîte de recherche comprend une icône de recherche et un champ de saisie propre qui s’adapte bien aux environnements d’entreprise.
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.
Composant de la boîte de recherche de jeux
Un composant de champ de recherche réactif et simple pour les sites Web de jeux, inspiré des principes de conception du Bauhaus avec une palette de couleurs forêt/vert et la prise en charge du mode sombre.