Boîte de recherche Glassmorphism
Un composant de boîte de recherche glassmorphism simple et réactif avec des couleurs en niveaux de gris, adapté à un tableau de bord. Prend en charge le mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative w-full max-w-md">
<input type="text" placeholder="Search..." class="w-full py-3 px-5 pr-12 rounded-lg backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-600 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 transition duration-300 ease-in-out"
/>
<div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
<svg class="h-5 w-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
</div>
</div>Composants associés
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.
Boîte de recherche de la conception matérielle
Un composant de boîte de recherche inspiré des principes de conception matérielle, construit à l’aide de Tailwind CSS. Il présente un comportement réactif s’adaptant à la largeur du conteneur, un retour visuel via des transitions d’ombres de survol et de focus (effets de profondeur) et une prise en charge complète des thèmes sombres. Le composant comprend une icône de recherche principale et garantit une esthétique épurée et moderne. Implémentation CSS uniquement. Idéal pour l’intégration dans diverses dispositions en raison de sa nature « w-full ». Pour des raisons d’accessibilité, assurez-vous d’associer l’élément 'input' à un '<label>' correspondant ou de fournir une 'aria-label' descriptive.
Composant de zone de recherche
Composant de boîte de recherche réactif avec prise en charge du thème sombre, palette de couleurs des tons de terre et design minimal.