Neon_Glow_Search_Box
Un composant de champ de recherche simple et réactif avec des effets de lueur néon en bleu électrique et en rose vif pour les applications technologiques/SaaS, y compris la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gray-900 min-h-screen flex items-center justify-center dark:bg-gray-950">
<div class="w-full max-w-lg">
<div class="relative flex items-center w-full max-w-md mx-auto rounded-full shadow-lg dark:shadow-xl group transition-all duration-300 ease-in-out
bg-gradient-to-r from-gray-800 to-gray-900 border border-gray-700
dark:from-gray-900 dark:to-black dark:border-gray-800
focus-within:border-blue-500 focus-within:shadow-blue-500/50 dark:focus-within:border-pink-500 dark:focus-within:shadow-pink-500/50">
<!-- Neon Glow Border Effect -->
<div class="absolute inset-0 rounded-full blur-sm opacity-0 group-hover:opacity-60 dark:group-hover:opacity-70
bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 dark:from-blue-600 dark:via-purple-600 dark:to-pink-600
transition-opacity duration-500 ease-in-out"></div>
<div class="absolute inset-0 rounded-full blur-md opacity-0 group-hover:opacity-40 dark:group-hover:opacity-50
bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 dark:from-blue-500 dark:via-purple-500 dark:to-pink-500
transition-opacity duration-500 ease-in-out delay-100"></div>
<div class="absolute inset-0 rounded-full blur-lg opacity-0 group-hover:opacity-20 dark:group-hover:opacity-30
bg-gradient-to-r from-blue-300 via-purple-300 to-pink-300 dark:from-blue-400 dark:via-purple-400 dark:to-pink-400
transition-opacity duration-500 ease-in-out delay-200"></div>
<!-- Inner content and input -->
<div class="relative z-10 flex items-center w-full rounded-full overflow-hidden">
<input type="text" placeholder="Search for anything..." class="flex-grow py-3 pl-6 pr-2 text-white bg-transparent outline-none rounded-l-full
placeholder-gray-400 dark:placeholder-gray-500
font-medium text-lg leading-tight
focus:ring-0 appearance-none
transition-colors duration-300 ease-in-out
dark:text-gray-100">
<button type="submit" class="flex-shrink-0 p-3 pr-6 rounded-r-full
bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-700 dark:to-purple-700
hover:from-blue-700 hover:to-purple-700 dark:hover:from-blue-800 dark:hover:to-purple-800
transition-all duration-300 ease-in-out
transform hover:scale-105 active:scale-95
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-pink-500 dark:focus:ring-offset-gray-900
shadow-md hover:shadow-lg dark:shadow-xl
group-hover:shadow-blue-500/40 dark:group-hover:shadow-pink-500/40">
<svg class="w-6 h-6 text-white" 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>
</div>
</div>Composants associés
Bauhaus_Agriculture_Search_Box
Composant de champ de recherche réactif pour les sites Web agricoles/agricoles, conçu avec les principes du Bauhaus, les tons sépia/brun et la prise en charge du mode sombre.
Champ de recherche inspiré de la nature biologique
Un composant de champ de recherche simple et réactif avec un design organique, inspiré de la nature et un dégradé arc-en-ciel, adapté aux sites Web d’entreprise ou d’entreprise. Inclut la prise en charge du mode sombre.
3D_Candy_SearchBox_Manufacturing
Un composant de boîte de recherche réactif inspiré de la 3D avec des couleurs bonbon/douces, adapté aux applications manufacturières/industrielles, avec un effet d’ombre subtil et des éléments interactifs.