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.
HTML Code
<div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 w-96">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 text-center">Search</h2>
<div class="relative">
<input type="text" placeholder="Search..." class="block w-full px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-md border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 transition duration-150 ease-in-out" />
<button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-150 ease-in-out">Search</button>
</div>
<div class="mt-4 text-center">
<h3 class="text-gray-700 dark:text-gray-300">Looking for something specific?</h3>
<p class="text-gray-500 dark:text-gray-400 text-sm">Type and hit enter or click the search button.</p>
</div>
</div>
</div>Composants associés
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.
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.
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.