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 mit ansprechenden Mikrointeraktionen und einem triadischen Farbschema, das den Dunkelmodus unterstützt.

Offen

Komponente "Filter"

Eine reaktionsschnelle Filterkomponente, die für die Benutzeroberfläche im Dunkelmodus mit Tailwind CSS entwickelt wurde. Es enthält Optionen zum Filtern von Inhalten, verwendet dunkle Hintergründe und spart Akkulaufzeit.

Offen

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