CCHub Logo CCHub Tailwind Collection
Komponenten Filter Komponente "Filter"

Komponente "Filter"

Eine Filterkomponente im skeuomorphen Stil, die für Dashboards mit einem Graustufen-Farbschema und responsivem Design mit Unterstützung für dunkle Designs entwickelt wurde.

Vorschau

HTML-Code 

<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
    <h2 class="text-gray-900 dark:text-gray-100 text-lg font-bold mb-4">Filters</h2>
    <form class="flex flex-col space-y-4">
        <div class="flex items-center">
            <label for="search" class="text-gray-700 dark:text-gray-300 mr-2">Search:</label>
            <input type="text" id="search" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500" placeholder="Search..." />
        </div>
        <div class="flex items-center">
            <label for="category" class="text-gray-700 dark:text-gray-300 mr-2">Category:</label>
            <select id="category" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500">
                <option>All</option>
                <option>Category 1</option>
                <option>Category 2</option>
                <option>Category 3</option>
            </select>
        </div>
        <div class="flex items-center">
            <label for="date" class="text-gray-700 dark:text-gray-300 mr-2">Date:</label>
            <input type="date" id="date" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500" />
        </div>
        <button type="submit" class="bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-800 rounded-lg py-2 hover:bg-gray-700 dark:hover:bg-gray-200 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500 transition">Apply Filters</button>
    </form>
</div>

Verwandte Komponenten

Komponente "Filter"

Eine reaktionsschnelle Filterkomponente für den E-Commerce, die ein Dark-Mode-Styling mit einem Farbschema in Erdtönen umfasst.

Offen

Retro_Vintage_Earth_Tones_Filters_Component

Eine Filterkomponente mittlerer Komplexität mit Retro-/Vintage-Ästhetik und Erdtönen, die für ein Armaturenbrett geeignet sind. Verfügt über responsives Design und Unterstützung für den Dunkelmodus.

Offen

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.

Offen