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 einfache Suchfeld-Komponente, die für Social-Media-Schnittstellen mit Unterstützung des Dunkelmodus und einem ergänzenden Farbschema entwickelt wurde.
Suchfeld-Komponente
Eine reaktionsschnelle Suchfeld-Komponente, die im Glassmorphism-Stil entwickelt wurde, den Dunkelmodus unterstützt und auf E-Commerce-Anwendungen zugeschnitten ist.
Suchfeld-Komponente
Ein responsives Suchfeld mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS.