CCHub Logo CCHub Tailwind Collection
Komponenten Filter Komponente "Filter"

Komponente "Filter"

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

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md transition-all duration-300">
    <h2 class="text-xl font-semibold mb-4">Filters</h2>
    <div class="flex flex-col md:flex-row md:space-x-4 mb-4">
        <input type="text" placeholder="Search..." class="border rounded-lg p-2 focus:outline-none focus:ring focus:ring-purple-500 dark:bg-gray-900 dark:border-gray-600 transition duration-300" />
        <select class="border rounded-lg p-2 focus:outline-none focus:ring focus:ring-purple-500 dark:bg-gray-900 dark:border-gray-600 transition duration-300">
            <option value="">Select Category</option>
            <option value="category1">Category 1</option>
            <option value="category2">Category 2</option>
        </select>
        <button class="bg-purple-500 text-white rounded-lg p-2 hover:bg-purple-600 transition duration-300 dark:bg-purple-700 dark:hover:bg-purple-600">Apply</button>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200?random=1" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-2" />
            <h3 class="text-lg font-medium">Filter Item 1</h3>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200?random=2" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-2" />
            <h3 class="text-lg font-medium">Filter Item 2</h3>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200?random=3" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-2" />
            <h3 class="text-lg font-medium">Filter Item 3</h3>
        </div>
    </div>
    <div class="mt-4">
        <p class="text-sm text-gray-600 dark:text-gray-400">Using filters can help narrow down your search results based on your preferences!</p>
    </div>
</div>

Verwandte Komponenten

Komponente "Filter"

Eine komplexe, reaktionsschnelle Filterkomponente mit dem Designstil "Wald/Grün" und "Verlauf/Farbübergänge", die sich für ein Portfolio eignet. Enthält Unterstützung für den Dunkelmodus und interaktive Elemente.

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