CCHub Logo CCHub Tailwind Collection
Komponenten Filter Komponente "Filter"

Komponente "Filter"

Eine ausgeklügelte Filterkomponente, die mit Glassmorphism und einem analogen Farbschema entwickelt wurde und sich für die Visualisierung von Dashboard-Daten mit Unterstützung für dunkle Themen eignet.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-800 p-6 dark:bg-gray-900">
    <div class="bg-white bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-8 w-full max-w-4xl border border-gray-200 dark:bg-gray-800 dark:bg-opacity-60 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Filters</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex flex-col">
                <label class="mb-1 text-gray-700 dark:text-gray-300">Category</label>
                <select class="bg-transparent border rounded-md p-2 text-gray-900 dark:text-gray-200">
                    <option>All</option>
                    <option>Analytics</option>
                    <option>Marketing</option>
                    <option>Sales</option>
                </select>
            </div>
            <div class="flex flex-col">
                <label class="mb-1 text-gray-700 dark:text-gray-300">Status</label>
                <select class="bg-transparent border rounded-md p-2 text-gray-900 dark:text-gray-200">
                    <option>Active</option>
                    <option>Inactive</option>
                    <option>Pending</option>
                </select>
            </div>
            <div class="flex flex-col">
                <label class="mb-1 text-gray-700 dark:text-gray-300">Date Range</label>
                <div class="flex space-x-2">
                    <input type="date" class="bg-transparent border rounded-md p-2 w-1/2 text-gray-900 dark:text-gray-200">
                    <input type="date" class="bg-transparent border rounded-md p-2 w-1/2 text-gray-900 dark:text-gray-200">
                </div>
            </div>
            <div class="flex flex-col">
                <label class="mb-1 text-gray-700 dark:text-gray-300">Search</label>
                <input type="text" placeholder="Search..." class="bg-transparent border rounded-md p-2 text-gray-900 dark:text-gray-200">
            </div>
        </div>
        <div class="flex justify-between items-center mt-6">
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md dark:bg-blue-500 dark:hover:bg-blue-600">Apply</button>
            <button class="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-md dark:bg-gray-600 dark:hover:bg-gray-700">Reset</button>
        </div>
    </div>
</div>

Verwandte Komponenten

Bauhaus_EarthTone_Agriculture_Filters_Component

Eine komplexe, responsive Filterkomponente für Landwirtschafts-Websites, gestaltet im Bauhaus-Stil mit Erdtönen. Enthält verschiedene Filteroptionen wie Kategorien, Preisspanne, Bewertungen und beliebte Tags mit vollständiger Unterstützung des Dunkelmodus.

Offen

Komponente "Filter"

Eine komplexe, reaktionsschnelle Filterkomponente für ein Dashboard mit einem klaren, minimalistischen Design mit einem Neon-/Elektro-Farbschema, das mehrere interaktive Elemente und den Dunkelmodus unterstützt. Entwickelt für Datenvisualisierung und Bedienfelder.

Offen

Komponente "Filter"

Eine einfache, reaktionsschnelle Filterkomponente für soziale Medien mit einem Mikrointeraktionsstil, einem analogen Farbschema und Unterstützung für dunkle Themen.

Offen