Composant de la boîte de recherche Glassmorphism
Un composant de champ de recherche réactif de style glassmorphism avec des couleurs en niveaux de gris, adapté aux blogs ou aux sites de contenu, doté d’une entrée et d’un bouton translucides semblables à du verre dépoli. Inclut la prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 duration-300 p-4">
<div class="w-full max-w-md backdrop-blur-md bg-white/20 dark:bg-gray-800/20 rounded-2xl p-6 shadow-lg border border-white/30 dark:border-gray-700/30 transition-all duration-300 ease-in-out">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4 text-center select-none">
Search Content
</h3>
<div class="relative flex items-center w-full">
<input
type="text"
placeholder="Search articles, topics..."
class="flex-grow py-3 pl-4 pr-12 text-gray-800 dark:text-gray-100 placeholder-gray-600 dark:placeholder-gray-400 bg-white/40 dark:bg-gray-700/40 border border-white/50 dark:border-gray-600/50 rounded-xl focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-300 transition-all duration-300 ease-in-out shadow-inner placeholder-shown:italic"
/>
<button
class="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-lg bg-white/60 dark:bg-gray-700/60 text-gray-800 dark:text-gray-100 hover:bg-white/80 dark:hover:bg-gray-700 hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</button>
</div>
<p class="text-xs text-gray-600 dark:text-gray-400 mt-3 text-center select-none">
Discover new insights and stories.
</p>
</div>
</div>Composants associés
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.
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
Une boîte de recherche réactive avec prise en charge du mode sombre à l’aide de Tailwind CSS.