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

Komponente "Filter"

Eine Filterkomponente, die mit einem skeuomorphen Stil gestaltet wurde, mit responsiven Effekten und Unterstützung für dunkle Themen. Diese Komponente verwendet Tailwind CSS für das Styling und enthält zufällige Platzhalterbilder und Avatare.

Offen

FiltersComponentNeumorphism

Eine einfache Komponente für responsive Filter, die mit der Soft-UI von Neumorphism gestaltet ist und ein Graustufen-Farbschema verwendet, das für Geschäfts-/Unternehmenswebsites entwickelt wurde. Die Komponente unterstützt den Dunkelmodus und wird mit Tailwind CSS ohne JavaScript erstellt.

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