CCHub Logo CCHub Tailwind Collection
Komponenten Filter Komponente "Filter"

Komponente "Filter"

Eine minimalistische und reaktionsschnelle Filterkomponente für den E-Commerce mit Unterstützung für dunkle Themen. Es enthält Kategorien, Preisspanne und einen Farbfilter.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 rounded-lg shadow-md">
  <h3 class="text-lg font-semibold mb-4">Filter Products</h3>
  
  <div class="mb-6">
    <h4 class="text-md font-medium mb-2">Categories</h4>
    <ul class="space-y-2 text-sm">
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Electronics</a></li>
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Apparel</a></li>
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Home Goods</a></li>
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Books</a></li>
    </ul>
  </div>

  <div class="mb-6">
    <h4 class="text-md font-medium mb-2">Price Range</h4>
    <input type="range" min="0" max="1000" value="500" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer">
    <div class="flex justify-between text-sm mt-1">
      <span>$0</span>
      <span>$1000+</span>
    </div>
  </div>

  <div class="mb-6">
    <h4 class="text-md font-medium mb-2">Color</h4>
    <div class="flex space-x-2">
      <span class="block w-6 h-6 rounded-full bg-black cursor-pointer border-2 border-gray-300 dark:border-gray-600"></span>
      <span class="block w-6 h-6 rounded-full bg-white cursor-pointer border-2 border-gray-400 dark:border-gray-500"></span>
      <span class="block w-6 h-6 rounded-full bg-gray-500 cursor-pointer border-2 border-gray-300 dark:border-gray-600"></span>
    </div>
  </div>

  <button class="w-full bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-300">
    Apply Filters
  </button>
</div>

Verwandte Komponenten

FiltersComponentNeumorphism

Eine einfache Komponente für responsive Filter, die mit der Soft-UI von Neumorphism gestaltet ist und ein Graustufen-Farbschema verwendet, das für Geschäfts-/Unternehmenswebsites entwickelt wurde. Die Komponente unterstützt den Dunkelmodus und wird mit Tailwind CSS ohne JavaScript erstellt.

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

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