CCHub Logo CCHub Tailwind Collection
Komponenten Filter Komponente "Filter"

Komponente "Filter"

Eine einfache Filterkomponente, die für einen Blog oder eine Website zum Konsum von Inhalten entwickelt wurde und einer Benutzeroberfläche im Dunkelmodus mit einem monochromatischen Farbschema folgt. Es verfügt über ein responsives Layout mit minimalen Elementen.

Vorschau

HTML-Code 

<div class="bg-gray-800 dark:bg-gray-900 p-5 rounded-md shadow-lg max-w-md mx-auto">
    <h2 class="text-white text-lg font-semibold mb-4">Filters</h2>
    <div class="mb-4">
        <label for="category" class="text-gray-300 dark:text-gray-400">Category</label>
        <select id="category" class="bg-gray-700 dark:bg-gray-800 text-white border border-gray-600 rounded-md w-full p-2 mt-1">
            <option>All</option>
            <option>Technology</option>
            <option>Health</option>
            <option>Lifestyle</option>
            <option>Travel</option>
        </select>
    </div>
    <div class="mb-4">
        <label for="author" class="text-gray-300 dark:text-gray-400">Author</label>
        <select id="author" class="bg-gray-700 dark:bg-gray-800 text-white border border-gray-600 rounded-md w-full p-2 mt-1">
            <option>All</option>
            <option>John Doe</option>
            <option>Jane Smith</option>
            <option>Chris Johnson</option>
        </select>
    </div>
    <div class="mb-4">
        <label class="text-gray-300 dark:text-gray-400">Sort By</label>
        <div class="flex space-x-4 mt-1">
            <label class="inline-flex items-center">
                <input type="radio" class="form-radio text-blue-500" name="sort" value="latest">
                <span class="ml-2 text-white">Latest</span>
            </label>
            <label class="inline-flex items-center">
                <input type="radio" class="form-radio text-blue-500" name="sort" value="popular">
                <span class="ml-2 text-white">Popular</span>
            </label>
        </div>
    </div>
    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md">Apply Filters</button>
</div>

Verwandte Komponenten

Komponente "Filter"

Eine reaktionsschnelle Filterkomponente, die im Glassmorphism-Stil entwickelt wurde, mit Pastellfarben und Unterstützung für den Dunkelmodus, die sich an Geschäfts-/Unternehmenswebsites richtet.

Offen

Komponente "Filter"

Eine reaktionsschnelle Filterkomponente, die mit Mikrointeraktionen entwickelt wurde und für die Unterstützung dunkler Themen optimiert ist.

Offen

Komponente "Filter"

Eine minimalistische Filterkomponente mit responsivem Design und Unterstützung für dunkle Themen mit Tailwind CSS.

Offen