CCHub Logo CCHub Tailwind Collection
Komponenten Suchfeld Retro Vintage Suchfeld

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

HTML-Code 

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

Verwandte Komponenten

Suchfeld-Komponente

Eine komplexe Suchfeldkomponente im Glassmorphism-Stil mit analogem Farbschema, die für ein Portfolio geeignet ist, mit responsivem Design und Unterstützung für dunkle Themen, die nur HTML und Tailwind CSS verwenden.

Offen

Brutalist_Weather_Search_Box

Eine komplexe, kontrastreiche, brutalistische Suchfeldkomponente für Wetter- und Klimadaten mit mehreren Eingabeelementen und responsivem Design mit Unterstützung für den Dunkelmodus.

Offen

Suchfeld-Komponente

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