CCHub Logo CCHub Tailwind Collection
Komponenten Filter Komponente "Filter"

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.

Vorschau

HTML-Code 

<div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
  <h2 class="text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Filters</h2>
  <div class="space-y-4">
    <div class="flex items-center">
      <input type="checkbox" id="filter1" class="w-4 h-4 text-green-500 bg-gray-200 border-gray-300 rounded focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-600" />
      <label for="filter1" class="ml-2 text-gray-800 dark:text-gray-200">Filter Option 1</label>
    </div>
    <div class="flex items-center">
      <input type="checkbox" id="filter2" class="w-4 h-4 text-blue-500 bg-gray-200 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" />
      <label for="filter2" class="ml-2 text-gray-800 dark:text-gray-200">Filter Option 2</label>
    </div>
    <div class="flex items-center">
      <input type="checkbox" id="filter3" class="w-4 h-4 text-red-500 bg-gray-200 border-gray-300 rounded focus:ring-2 focus:ring-red-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-red-600" />
      <label for="filter3" class="ml-2 text-gray-800 dark:text-gray-200">Filter Option 3</label>
    </div>
  </div>
  <div class="mt-6">
    <button class="w-full text-white bg-blue-500 hover:bg-blue-700 rounded-lg p-2 text-center transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-600">Apply Filters</button>
  </div>
  <div class="mt-4">
    <img src="https://picsum.photos/400/200?random=1" alt="Random Image" class="rounded-lg shadow-md" />
    <img src="https://picsum.photos/400/200?random=2" alt="Random Image" class="rounded-lg shadow-md mt-4" />
  </div>
  <div class="flex justify-between items-center mt-4">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-lg" />
    <span class="text-gray-800 dark:text-gray-200">User Name</span>
  </div>
</div>

Verwandte Komponenten

Komponente "Filter"

Eine komplexe, reaktionsschnelle Filterkomponente für ein Dashboard mit einem klaren, minimalistischen Design mit einem Neon-/Elektro-Farbschema, das mehrere interaktive Elemente und den Dunkelmodus unterstützt. Entwickelt für Datenvisualisierung und Bedienfelder.

Offen

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 minimalistische Filterkomponente mit responsivem Design und Unterstützung für dunkle Themen mit Tailwind CSS.

Offen