CCHub Logo CCHub Tailwind Collection
Komponenten Suchfeld Komponente des Glassmorphism-Suchfelds

Komponente des Glassmorphism-Suchfelds

Eine moderne Suchfeldkomponente mit einem Milchglaseffekt (Glasmorphismus) unter Verwendung von Pastellfarben. Die Komponente ist einfach, aber elegant und wurde für professionelle Business-Websites entwickelt. Es verfügt über einen durchscheinenden Hintergrund mit subtilen Unschärfeeffekten, responsivem Design und Unterstützung für den Dunkelmodus. Das Suchfeld enthält ein Suchsymbol und ein sauberes Eingabefeld, das sich gut in Unternehmensumgebungen einfügt.

Vorschau

HTML-Code 

<!-- 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>

Verwandte Komponenten

Komponente des Glassmorphism-Suchfelds

Eine reaktionsschnelle Suchfeldkomponente im Glassmorphism-Stil mit Graustufenfarben, die für Blogs oder Content-Websites geeignet ist, mit einer mattglasähnlichen, durchscheinenden Eingabe und Schaltfläche. Enthält Unterstützung für den Dunkelmodus.

Offen

Suchfeld-Komponente

Eine Suchfeld-Komponente, die im Brutalismus-Stil unter Verwendung von Tailwind CSS entworfen wurde. Verfügt über ein kontrastreiches Design, reaktionsschnelle Effekte und unterstützt ein dunkles Design.

Offen

Suchfeld für Brutalismus

Suchfeld-Komponente im Brutalismus-Stil, reaktionsschnell, Unterstützung für dunkle Themen, kein JS. Verwendet picsum.photos für Bilder und randomuser.me für Avatare, falls erforderlich.

Offen