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.
HTML-Code
<div class="flex flex-col items-center justify-center p-6 bg-gradient-to-r from-gray-800 to-gray-700 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
<h2 class="text-white text-2xl font-semibold mb-4">Search Our Resources</h2>
<div class="relative w-full max-w-md">
<input type="text" placeholder="Search..." class="w-full p-4 pl-10 text-gray-900 dark:text-gray-300 bg-white dark:bg-gray-800 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition-all duration-200" />
<div class="absolute inset-y-0 left-0 flex items-center pl-3">
<img src="https://picsum.photos/20/20" alt="Search Icon" class="w-5 h-5 text-gray-400 dark:text-gray-500" />
</div>
</div>
<div class="flex justify-between items-center w-full mt-4">
<button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg shadow hover:bg-blue-700 transition-all duration-200">Search</button>
<button class="px-4 py-2 text-sm font-medium text-gray-200 dark:text-gray-400 hover:underline">Advanced Search</button>
</div>
</div>Verwandte Komponenten
Suchfeld-Komponente
Eine responsive Suchfeldkomponente für Unternehmens-/Unternehmenswebsites mit Mikrointeraktionen und einem analogen Farbschema. Es enthält eine Sucheingabe, eine Schaltfläche und ein Dropdown-Menü für dynamische Ergebnisse mit Benutzer-Avataren und Text, die den Dunkelmodus unterstützen.
RetroSearchBox
Retro/Vintage-Suchfeld mit 80er/90er-Jahre-Ästhetik, reaktionsschnell, Unterstützung für den Dunkelmodus.
Suchfeld-Komponente
Eine Suchfeldkomponente, die mit einem skeuomorphen Stil entworfen wurde, um ein reales Suchfeld nachzuahmen, mit einem triadischen Farbschema, geeignet für ein Portfolio und reaktionsschnell mit Unterstützung für den Dunkelmodus.