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

RetroMedicalFiltersComponent

Eine reaktionsschnelle Filterkomponente im Retro-/Vintage-Stil für Anwendungen im Gesundheitswesen mit herbstlichen Farben und Unterstützung für den Dunkelmodus. Es enthält interaktive Filteroptionen für Kategorien, Datumsbereich und Status.

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

Glassmorphism_EarthTones_SocialMedia_Filters

Eine komplexe, reaktionsschnelle Social-Media-Filterkomponente mit einem Glasmorphismus-Design, einem erdfarbenen Farbschema und vollständiger Unterstützung des Dunkelmodus. Verfügt über durchscheinende Elemente aus Milchglas-ähnlichem mit Unschärfeeffekten, semantischem HTML und interaktiven Filteroptionen.

Offen