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
Composant de zone de recherche
Un composant de champ de recherche minimaliste et plat avec une palette de couleurs pastel, une interface complexe avec de multiples éléments interactifs, conçu pour un portfolio présentant des travaux ou des produits.
Composant de zone de recherche
Une boîte de recherche réactive avec prise en charge du mode sombre à l’aide de Tailwind CSS.
Boîte de recherche vintage rétro
Un composant de champ de recherche réactif doté d’une esthétique rétro/vintage, utilisant une palette de couleurs analogue adaptée aux interfaces de médias sociaux, avec prise en charge du thème sombre.