Suchfeld

Suchfeld-Komponente

Eine einfache Suchfeldkomponente im Retro-/Vintage-Stil, die für einen Blog oder den Konsum von Inhalten entwickelt wurde. Es verwendet ein monochromatisches Farbschema und reagiert mit Unterstützung für dunkle Themen.

Vorschau öffnen

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-full max-w-md">
        <h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Search</h2>
        <div class="relative">
            <input type="text" placeholder="Search..." class="block w-full px-4 py-2 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 border rounded-lg focus:outline-none focus:border-gray-500 dark:focus:border-gray-600" />
            <div class="absolute inset-y-0 right-0 flex items-center pr-2">
                <button class="bg-blue-500 dark:bg-blue-700 text-white rounded-lg p-2 hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">
                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3a8 8 0 11-8 8 8 8 0 018-8z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

Suchfeld-Komponente

Eine minimalistische und flache Design-Suchfeldkomponente mit einem pastellfarbenen Farbschema, einer komplexen Benutzeroberfläche mit mehreren interaktiven Elementen, die für ein Portfolio entwickelt wurde, in dem Arbeiten oder Produkte präsentiert werden.

Vorschau öffnen

                <div class="flex justify-center items-center p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full md:w-1/2">
    <input type="text" placeholder="Search..." class="w-full h-12 p-4 mr-2 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-300 transition duration-200 ease-in-out" />
    <button class="h-12 px-4 text-white bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 rounded-lg focus:outline-none transition duration-200 ease-in-out">Search</button>
</div>

<div class="mt-6 bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Portfolio</h2>
    <p class="text-gray-600 dark:text-gray-400">Showcasing work or products.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200" alt="Portfolio Item" class="w-full" />
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item" class="w-full" />
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item" class="w-full" />
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item" class="w-full" />
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
            </div>
        </div>
    </div>
</div>

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.

Vorschau öffnen

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">  
    <div class="relative w-full max-w-md">  
        <input type="text" placeholder="Search..."  
            class="w-full p-4 pl-10 pr-4 text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700"/>  
        <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-600">  
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">  
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a7 7 0 100 14 7 7 0 000-14zM16.293 16.293a8 8 0 111.414-1.414l4.281 4.283-1.414 1.414-4.282-4.283z" />  
            </svg>  
        </div>  
    </div>  
</div>

Einfaches 3D-Pastell-Suchfeld

Eine responsive Suchfeldkomponente mit 3D-ähnlichem Design, Pastellfarbschema und Unterstützung für dunkle Themen, die mit Tailwind CSS für einen Blog/eine Content-Website erstellt wurde.

Vorschau öffnen

                <body>
  <div class="min-h-screen bg-gradient-to-br from-pastel-pink-200 to-pastel-blue-200 dark:from-pastel-purple-900 dark:to-pastel-teal-900 p-8">
    <div class="max-w-md mx-auto">

      <!-- Simple Search Box -->
      <div class="relative transform translate-z-0 group">
        <input type="text" placeholder="Search..." class="w-full px-6 py-3 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-pastel-green-400 dark:focus:ring-pastel-teal-600 transition-all transform origin-center group-hover:-translate-y-1 group-hover:shadow-lg">
        <div class="absolute inset-0 border-2 border-pastel-green-400 dark:border-pastel-teal-600 rounded-lg pointer-events-none transform translate-z-0 group-hover:-translate-y-1"></div>
        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2 w-6 h-6 text-gray-400 dark:text-gray-500 pointer-events-none" 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>
  </div>
</body>

Retro Vintage Suchfeld

Eine reaktionsschnelle Suchfeld-Komponente, die im Retro-/Vintage-Stil gestaltet ist und ein analoges Farbschema verwendet, das für Social-Media-Schnittstellen geeignet ist, mit Unterstützung für dunkle Themen.

Vorschau öffnen

                <div class="flex justify-center items-center p-5 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-900 dark:to-pink-800 rounded-lg shadow-lg mt-10">
    <input type="text" placeholder="Search..." class="w-80 p-3 border-2 border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-300 dark:border-purple-700 dark:bg-gray-800 dark:text-white dark:focus:ring-pink-600">
    <button class="ml-2 p-3 bg-yellow-400 text-white rounded-lg font-semibold hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700">
        <img src="https://picsum.photos/20/20" alt="Search Icon" class="inline"> Search
    </button>
</div>

<div class="flex justify-center items-center mt-3">
    <img src="https://picsum.photos/200/100" alt="Search Illustration" class="rounded-md shadow-md">
</div>

<div class="mt-5 text-center">
    <div class="flex items-center justify-center">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
        <p class="ml-2 text-lg text-gray-800 dark:text-gray-200">User Name</p>
    </div>
    <p class="text-sm text-gray-600 dark:text-gray-400">Search for something amazing...</p>
</div>

Suchfeld-Komponente

Eine einfache Suchfeld-Komponente, die für Social-Media-Schnittstellen mit Unterstützung des Dunkelmodus und einem ergänzenden Farbschema entwickelt wurde.

Vorschau öffnen

                <div class="flex justify-center items-center p-4 bg-gray-800 dark:bg-gray-900">
    <input type="text" placeholder="Search..." class="w-full max-w-md p-2 border-2 border-blue-500 dark:border-blue-300 rounded-lg bg-gray-700 dark:bg-gray-800 text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:border-blue-400 dark:focus:border-blue-200">
    <button class="ml-2 p-2 bg-blue-500 dark:bg-blue-600 rounded-lg text-white hover:bg-blue-400 dark:hover:bg-blue-500 focus:outline-none">Search</button>
</div>

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.

Vorschau öffnen

                <div class="relative max-w-md mx-auto mt-10">
  <input type="text" placeholder="Search..." class="w-full px-6 py-4 text-lg text-gray-800 bg-yellow-300 border-4 border-black focus:outline-none focus:border-red-600 dark:bg-yellow-600 dark:text-gray-200 dark:border-white dark:focus:border-red-800">
  <svg class="absolute right-0 top-0 mt-4 mr-5 w-6 h-6 text-black dark:text-white" 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>

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.

Vorschau öffnen

                <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>

Suchfeld-Komponente

Eine Retro-/Vintage-Suchfeld-Komponente, die mit Tailwind CSS gestaltet ist. Es bietet responsives Design, Unterstützung für dunkle Themen und Platzhalterbilder.

Vorschau öffnen

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Search</h2>
        <div class="relative">
            <input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Type your query..." />
            <button class="absolute inset-y-0 right-0 flex items-center px-4 text-white bg-blue-600 hover:bg-blue-700 rounded-r-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a7 7 0 100 14 7 7 0 000-14z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35" />
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-10 flex">
        <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-lg shadow-md" />
        <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-lg shadow-md ml-4" />
    </div>
    <div class="mt-6 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md" />
        <p class="ml-2 text-gray-800 dark:text-white">User Name</p>
    </div>
</div>

Suchfeld für Brutalismus

Suchfeld-Komponente im Brutalismus-Stil, reaktionsschnell, Unterstützung für dunkle Themen, kein JS. Verwendet picsum.photos für Bilder und randomuser.me für Avatare, falls erforderlich.

Vorschau öffnen

                <div class="max-w-md mx-auto">
  <form class="flex items-center">
    <label for="simple-search" class="sr-only">Search</label>
    <div class="relative w-full">
      <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
        <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
      </div>
      <input type="text" id="simple-search" class="bg-white dark:bg-gray-800 border border-black dark:border-white text-black dark:text-white text-sm font-mono focus:ring-black focus:border-black block w-full pl-10 p-2.5 transform -translate-x-1 -translate-y-1 dark:transform-none dark:translate-x-1 dark:translate-y-1 transition duration-100 ease-in-out" placeholder="Search anything..." required>
    </div>
    <button type="submit" class="p-2.5 ml-2 text-sm font-mono text-white bg-black border border-black hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 dark:bg-white dark:text-black dark:border-white dark:hover:bg-gray-200 dark:focus:ring-gray-800 transform translate-x-1 translate-y-1 dark:transform-none dark:-translate-x-1 dark:-translate-y-1 transition duration-100 ease-in-out">
      <svg class="w-5 h-5" 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>
      <span class="sr-only">Search</span>
    </button>
  </form>
</div>

Kategorien