Componenti Casella di ricerca Componente della casella di ricerca Glassmorphism

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.

Anteprima

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

Componente Casella di ricerca

Componente Casella di ricerca con design 3D, effetti reattivi e supporto per temi scuri.

Aperto

Componente Casella di ricerca

Una casella di ricerca reattiva con supporto per la modalità oscura utilizzando Tailwind CSS.

Aperto

Neon_Glow_Search_Box

Un componente della casella di ricerca semplice e reattivo con effetti di bagliore al neon con blu elettrico e rosa acceso per applicazioni tecnologiche/SaaS, incluso il supporto della modalità scura.

Aperto