CCHub Logo CCHub Tailwind Collection
Komponenten Suchfeld RetroSearchBox

RetroSearchBox

Retro/Vintage-Suchfeld mit 80er/90er-Jahre-Ästhetik, reaktionsschnell, Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto">
  <div class="relative">
    <input type="text" class="w-full py-3 px-4 pr-10 text-sm text-gray-900 placeholder-gray-600 bg-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent border-2 border-gray-400 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:border-gray-600 dark:focus:ring-purple-400" placeholder="Search...">
    <svg class="absolute right-3 top-3 w-5 h-5 text-gray-600 dark:text-gray-400" 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>

Verwandte Komponenten

Suchfeld-Komponente

Eine Suchfeldkomponente im 3D-Stil, die für Geschäfts- und Unternehmenswebsites entwickelt wurde und eine komplexe Benutzeroberfläche mit Tiefe, interaktiven Elementen und Unterstützung für den Dunkelmodus bietet.

Offen

Suchfeld-Komponente

Eine Suchfeldkomponente im Dunkelmodus mit responsivem Design und Unterstützung für dunkle Designs. Es wird kein JavaScript verwendet. Bilder sind Platzhalterbilder.

Offen

Brutalistisches Suchfeld

Eine brutalistische Suchfeldkomponente für ein Dashboard mit komplementärem Farbschema und moderater Komplexität, mit responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen