Composant de zone de recherche
Composant de boîte de recherche avec conception 3D, effets réactifs et prise en charge du thème 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"
class="w-full px-5 py-3 text-gray-800 placeholder-gray-500 bg-white border border-gray-300 rounded-full shadow-lg dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 transition transform duration-300 ease-in-out hover:scale-105 focus:scale-105"
placeholder="Search..."
/>
<button
class="absolute inset-y-0 right-0 flex items-center px-4 text-white bg-blue-600 rounded-r-full hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600 transition transform duration-300 ease-in-out hover:scale-105"
>
<svg
class="w-5 h-5"
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>
</button>
</div>
</div>Composants associés
Composant de zone de recherche
Composant de zone de recherche avec interface utilisateur en mode sombre, schéma de couleurs monochromatique et complexité modérée pour les médias sociaux à l’aide de Tailwind CSS. Conception réactive avec prise en charge du thème sombre.
Composant de la boîte de recherche Glassmorphism
Un composant de boîte de recherche moderne avec un effet de verre dépoli (glassmorphism) utilisant des couleurs pastel. Le composant est simple mais élégant, conçu pour les sites Web d’entreprise professionnels. Il présente un arrière-plan translucide avec des effets de flou subtils, un design réactif et une prise en charge du mode sombre. La boîte de recherche comprend une icône de recherche et un champ de saisie propre qui s’adapte bien aux environnements d’entreprise.
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.