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

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

Suchfeld-Komponente

Suchfeldkomponente mit 3D-Design, responsiven Effekten und Unterstützung für dunkle Themen.

Offen

Skeuomorphes Suchfeld

Eine Suchfeldkomponente mit einem skeuomorphen Design, das reale Elemente nachahmt, mit Reaktionsfähigkeit und Unterstützung für dunkle Themen.

Offen