Componente della casella di ricerca Glassmorphism
Un moderno componente della casella di ricerca con un effetto vetro smerigliato (glassmorphism) che utilizza colori pastello. Il componente è semplice ma elegante, progettato per siti Web aziendali professionali. Presenta uno sfondo traslucido con sottili effetti di sfocatura, design reattivo e supporto per la modalità oscura. La casella di ricerca include un'icona di ricerca e un campo di input pulito che si adatta bene agli ambienti aziendali.
Codice HTML
<!-- Glassmorphism Search Box Component -->
<div class="w-full max-w-md mx-auto px-4">
<!-- Search Container with Glassmorphism Effect -->
<div class="relative backdrop-blur-sm bg-white/40 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700 rounded-full px-4 py-2 flex items-center shadow-lg transition-all duration-300 hover:shadow-xl">
<!-- Search Icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
<!-- Search Input -->
<input
type="text"
placeholder="Search..."
class="w-full bg-transparent border-none focus:ring-0 focus:outline-none ml-2 text-gray-600 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500"
>
<!-- Optional Clear Button -->
<button class="text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-300 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Optional Hint Text -->
<div class="text-xs text-center mt-2 text-gray-400 dark:text-gray-500">
Search for products, services, or information
</div>
</div>Componenti correlati
Casella di ricerca organica ispirata alla natura
Un componente della casella di ricerca semplice e reattivo con un design organico ispirato alla natura e una sfumatura arcobaleno, adatto per siti web aziendali o aziendali. Include il supporto per la modalità oscura.
Componente Casella di ricerca
Un componente della casella di ricerca progettato con lo stile Brutalism utilizzando Tailwind CSS. Presenta un design ad alto contrasto, effetti reattivi e supporta il tema scuro.
Componente Casella di ricerca
Un componente della casella di ricerca reattivo con un design brutalista, che utilizza una combinazione di colori complementari adatta ai siti Web aziendali.