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 de style 3D conçu pour les sites Web d’entreprise et d’entreprise, doté d’une interface complexe avec de la profondeur, des éléments interactifs et une prise en charge du mode sombre.
Boîte de recherche brutaliste
Un composant de champ de recherche brutaliste pour un tableau de bord, doté d’une palette de couleurs complémentaires et d’une complexité modérée, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
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.