Semplice casella di ricerca pastello 3D
Un componente casella di ricerca reattivo con un design simile al 3D, una combinazione di colori pastello e il supporto per temi scuri, creato con Tailwind CSS per un blog/sito Web di contenuti.
Codice HTML
<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>Componenti correlati
Brutalist_Weather_Search_Box
Un componente complesso, ad alto contrasto, in stile brutalista per i dati meteorologici e climatici, con più elementi di input e un design reattivo con supporto per la modalità oscura.
Componente Casella di ricerca
Una casella di ricerca reattiva con supporto per la modalità oscura utilizzando Tailwind CSS.
Componente Casella di ricerca
Un componente della casella di ricerca in modalità oscura con design reattivo e supporto per temi scuri. Non viene utilizzato alcun JavaScript. Le immagini sono immagini segnaposto.