Boîte de recherche 3D pastel simple
Un composant de champ de recherche réactif avec un design de type 3D, une palette de couleurs pastel et une prise en charge du thème sombre, conçu avec Tailwind CSS pour un site Web de blog/contenu.
HTML Code
<body>
<div class="min-h-screen bg-gradient-to-br from-pastel-pink-200 to-pastel-blue-200 dark:from-pastel-purple-900 dark:to-pastel-teal-900 p-8">
<div class="max-w-md mx-auto">
<!-- Simple Search Box -->
<div class="relative transform translate-z-0 group">
<input type="text" placeholder="Search..." class="w-full px-6 py-3 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-pastel-green-400 dark:focus:ring-pastel-teal-600 transition-all transform origin-center group-hover:-translate-y-1 group-hover:shadow-lg">
<div class="absolute inset-0 border-2 border-pastel-green-400 dark:border-pastel-teal-600 rounded-lg pointer-events-none transform translate-z-0 group-hover:-translate-y-1"></div>
<svg class="absolute right-4 top-1/2 transform -translate-y-1/2 w-6 h-6 text-gray-400 dark:text-gray-500 pointer-events-none" 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>
</body>Composants associés
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.
Composant de zone de recherche
Un composant de champ de recherche réactif conçu avec le style glassmorphism, prenant en charge le mode sombre et adapté aux applications de commerce électronique.
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.