Komponenten suchen

Kategorien

Suchfeld

Ermöglicht Benutzern das Durchsuchen von Website-Inhalten

Suchfeld-Komponente

Responsive Suchfeldkomponente mit Unterstützung für dunkle Themen, Farbschema in Erdtönen und minimalistischem Design.

                <form class="flex items-center w-full max-w-md mx-auto">
  <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-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search" required>
  </div>
  <button type="submit" class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
    <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>

Suchfeld-Komponente

Ein responsives Suchfeld mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS.

Offen Vorschau

                <form class="flex items-center w-full max-w-md mx-auto">
    <label for="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 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="search"
            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-stone-500 focus:border-stone-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-stone-500 dark:focus:border-stone-500"
            placeholder="Search..." required>
    </div>
    <button type="submit"
        class="p-2.5 ml-2 text-sm font-medium text-white bg-stone-700 rounded-lg border border-stone-700 hover:bg-stone-800 focus:ring-4 focus:outline-none focus:ring-stone-300 dark:bg-stone-600 dark:hover:bg-stone-700 dark:focus:ring-stone-800">
        <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>
    </button>
</form>

Eine komplexe Suchfeld-Komponente, die im brutalistischen Stil mit einem pastellfarbenen Farbschema gestaltet ist und auf Social-Media-Schnittstellen zugeschnitten ist. Die Komponente enthält interaktive Elemente wie Sucheingaben, Filter und eine Schaltfläche zum Senden, die alle den Dunkelmodus unterstützen.

Offen Vorschau

                <div class="w-full max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">Search</h2>
    <form class="flex flex-col space-y-4">
        <input type="text" placeholder="Search..." class="p-4 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-600 transition duration-200" />
        <div class="flex flex-wrap justify-between">  
            <select class="w-full md:w-auto p-2 rounded-lg border-2 border-gray-300 dark:border-gray-600 focus:outline-none dark:bg-gray-700 dark:text-white">
                <option value="all">All</option>
                <option value="images">Images</option>
                <option value="videos">Videos</option>
                <option value="users">Users</option>
            </select>
            <button class="flex items-center justify-center w-full md:w-auto p-3 bg-pink-500 dark:bg-pink-700 text-white rounded-lg shadow hover:bg-pink-600 dark:hover:bg-pink-800 transition duration-200">
                <svg class="w-5 h-5 mr-2" 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-4a9 9 0 10-6 0 9 9 0 006 0z" />
                </svg>
                Search
            </button>
        </div>
    </form>
    <div class="mt-6 bg-gray-100 dark:bg-gray-900 p-4 rounded-lg border border-gray-300 dark:border-gray-600">
        <h3 class="text-gray-700 dark:text-white mb-2">Featured Users</h3>
        <div class="flex items-center space-x-3">
            <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
            <span class="text-gray-700 dark:text-white">User1</span>
        </div>
        <div class="flex items-center space-x-3 mt-2">
            <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
            <span class="text-gray-700 dark:text-white">User2</span>
        </div>
        <div class="flex items-center space-x-3 mt-2">
            <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
            <span class="text-gray-700 dark:text-white">User3</span>
        </div>
    </div>
</div>

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.

Offen Vorschau

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

Offen Vorschau

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

Offen Vorschau

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

Offen Vorschau

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

Offen Vorschau

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

Offen Vorschau

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

Offen Vorschau

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