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 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.

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

Komponente "Filter"

Eine komplexe, reaktionsschnelle Filterkomponente im Glassmorphism-Stil mit einem analogen Farbschema für Geschäfts-/Unternehmenswebsites. Verfügt über durchscheinende Elemente und Unschärfeeffekte mit vollständiger Unterstützung des Dunkelmodus mit Tailwind CSS. Es ist kein JavaScript enthalten.

Offen