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.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
<div class="bg-gray-800 p-8 rounded-lg shadow-lg space-y-4">
<h1 class="text-3xl font-bold text-center">Search</h1>
<div class="flex items-center bg-gray-700 p-2 rounded-md">
<input type="text" placeholder="Type to search..." class="flex-grow bg-transparent border-none text-white outline-none placeholder-gray-400" />
<button class="ml-2 bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition duration-300">Go</button>
</div>
<div class="text-center">
<img src="https://picsum.photos/200/100" alt="Placeholder image" class="w-full h-auto rounded-md mt-4">
</div>
<div class="flex items-center justify-between mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<span class="text-sm">User Name</span>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1F1F1F;
}
.bg-gray-800 {
background-color: #2d2d2d;
}
.bg-gray-700 {
background-color: #3e3e3e;
}
}
</style>Composants associés
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.
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 zone de recherche
Un composant de champ de recherche réactif conçu selon les principes de Material Design, avec des styles CSS Tailwind et la prise en charge du thème sombre.