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
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.
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.
Composant de zone de recherche
Un composant de champ de recherche minimaliste conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.