CCHub Logo CCHub Tailwind Collection
Komponenten Filter Komponente "Filter"

Komponente "Filter"

Eine Komponente für responsive Filter, die im Brutalismus-Stil mit einem Graustufen-Farbschema für eine Dashboard-Einstellung entworfen wurde. Es enthält interaktive Filteroptionen und unterstützt dunkle Themen.

Vorschau

HTML-Code 

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold text-white mb-4">Filters</h2>
    <div class="grid grid-cols-2 gap-4">
        <div class="flex flex-col">
            <label class="text-gray-300 dark:text-gray-400 mb-2">Date Range:</label>
            <input type="date" class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white" />
            <input type="date" class="p-2 mt-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white" />
        </div>
        <div class="flex flex-col">
            <label class="text-gray-300 dark:text-gray-400 mb-2">User:</label>
            <input type="text" class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white" placeholder="Search by user..." />
        </div>
        <div class="flex flex-col">
            <label class="text-gray-300 dark:text-gray-400 mb-2">Status:</label>
            <select class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white">
                <option class="bg-gray-700 dark:bg-gray-800">All</option>
                <option class="bg-gray-700 dark:bg-gray-800">Active</option>
                <option class="bg-gray-700 dark:bg-gray-800">Inactive</option>
            </select>
        </div>
        <div class="flex flex-col">
            <label class="text-gray-300 dark:text-gray-400 mb-2">Category:</label>
            <select class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white">
                <option class="bg-gray-700 dark:bg-gray-800">Select category...</option>
                <option class="bg-gray-700 dark:bg-gray-800">Category 1</option>
                <option class="bg-gray-700 dark:bg-gray-800">Category 2</option>
            </select>
        </div>
    </div>
    <button class="mt-4 p-2 bg-gray-600 hover:bg-gray-500 text-white rounded">Apply Filters</button>
</div>

Verwandte Komponenten

Komponente "Filter"

Eine brutalistische Filterkomponente mit Tailwind CSS mit responsivem Design, Unterstützung für dunkle Themen und Platzhaltern für Bilder und Avatare.

Offen

Komponente "Filter"

Eine reaktionsschnelle Filterkomponente mit Mikrointeraktionen, ansprechenden Animationen und Unterstützung für dunkle Themen mithilfe von Tailwind CSS.

Offen

BrutalistFiltersComponent

Eine Filterkomponente im brutalistischen Stil mit hohem Kontrast, fetter Typografie und ungewöhnlichen Abständen. Es enthält Kontrollkästchen, Optionsfelder und einen Schieberegler für die Preisspanne. Responsive Effekte werden durch Media Queries und Fluid Units erzielt. Der Dunkelmodus wird über CSS unterstützt.

Offen