CCHub Logo CCHub Tailwind Collection
Komponenten Suchfeld Suchfeld-Komponente

Suchfeld-Komponente

Suchfeldkomponente mit Benutzeroberfläche im Dunkelmodus, monochromatischem Farbschema und mittlerer Komplexität für soziale Medien mit Tailwind CSS. Responsives Design mit Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md w-full space-y-8">
    <div>
      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
        Search Your Friends
      </h2>
    </div>
    <div class="mt-8 relative">
      <input type="text" placeholder="Search..." class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md leading-5 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm">
      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
        <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
        </svg>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-md mt-4">
      <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="px-4 py-4 sm:px-6 flex items-center space-x-3">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">John Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400 truncate">@johndoe</p>
          </div>
        </li>
        <li class="px-4 py-4 sm:px-6 flex items-center space-x-3">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">Jane Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400 truncate">@janesmith</p>
          </div>
        </li>
         <li class="px-4 py-4 sm:px-6 flex items-center space-x-3">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">Peter Jones</p>
            <p class="text-sm text-gray-500 dark:text-gray-400 truncate">@peterj</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Verwandte Komponenten

Industrial_Candy_SearchBox

Eine mäßig komplexe, reaktionsschnelle Suchfeldkomponente mit einer industriellen, aber bonbonfarbenen Ästhetik, die für professionelle Unternehmenswebsites entwickelt wurde und Unterstützung für den Dunkelmodus bietet.

Offen

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

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.

Offen