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 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 Filterkomponente, die mit einem skeuomorphen Stil gestaltet wurde, mit responsiven Effekten und Unterstützung für dunkle Themen. Diese Komponente verwendet Tailwind CSS für das Styling und enthält zufällige Platzhalterbilder und Avatare.

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