Catégories

Filtres

Outils pour aider les utilisateurs à filtrer le contenu

Composant Filtres

Un composant de filtres réactif de style rétro/vintage, prenant en charge le thème sombre avec Tailwind CSS.

                <div class="container mx-auto p-6 bg-white dark:bg-gray-800 rounded-md shadow-lg">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Filters</h2>
    <div class="flex flex-col md:flex-row md:justify-around mb-4">
        <div class="filter-item mb-4 md:mb-0">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="category">Category</label>
            <select id="category" class="form-select block w-full px-3 py-2 text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-300 border border-gray-300 rounded-md focus:ring focus:ring-indigo-200">
                <option>All</option>
                <option>Electronics</option>
                <option>Fashion</option>
                <option>Home & Garden</option>
            </select>
        </div>
        <div class="filter-item mb-4 md:mb-0">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="price">Price Range</label>
            <input type="range" id="price" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-600" min="0" max="100" value="50" />
        </div>
    </div>
    <div class="flex flex-col md:flex-row md:justify-between mb-6">
        <div class="filter-item mb-4 md:mb-0">
            <label class="inline-flex items-center text-gray-700 dark:text-gray-300">
                <input type="checkbox" class="form-checkbox text-indigo-600 h-5 w-5" />
                <span class="ml-2">In Stock</span>
            </label>
        </div>
        <div class="filter-item mb-4 md:mb-0">
            <label class="inline-flex items-center text-gray-700 dark:text-gray-300">
                <input type="checkbox" class="form-checkbox text-indigo-600 h-5 w-5" />
                <span class="ml-2">Free Shipping</span>
            </label>
        </div>
    </div>
    <div class="text-center">
        <button class="bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring focus:ring-indigo-200">Apply Filters</button>
    </div>
    <div class="mt-8">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Results</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
            <div class="result-item bg-gray-100 dark:bg-gray-700 rounded-md p-4 shadow">
                <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Item Name 1</h4>
                <img src="https://picsum.photos/200/150?random=1" alt="Item 1" class="rounded-md w-full" />
                <p class="text-gray-600 dark:text-gray-300">Description of item 1.</p>
                <div class="text-right mt-2">
                    <span class="text-gray-800 dark:text-gray-200 font-bold">$49.99</span>
                </div>
            </div>
            <div class="result-item bg-gray-100 dark:bg-gray-700 rounded-md p-4 shadow">
                <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Item Name 2</h4>
                <img src="https://picsum.photos/200/150?random=2" alt="Item 2" class="rounded-md w-full" />
                <p class="text-gray-600 dark:text-gray-300">Description of item 2.</p>
                <div class="text-right mt-2">
                    <span class="text-gray-800 dark:text-gray-200 font-bold">$29.99</span>
                </div>
            </div>
            <div class="result-item bg-gray-100 dark:bg-gray-700 rounded-md p-4 shadow">
                <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Item Name 3</h4>
                <img src="https://picsum.photos/200/150?random=3" alt="Item 3" class="rounded-md w-full" />
                <p class="text-gray-600 dark:text-gray-300">Description of item 3.</p>
                <div class="text-right mt-2">
                    <span class="text-gray-800 dark:text-gray-200 font-bold">$19.99</span>
                </div>
            </div>
        </div>
    </div>
</div>

Composant Filtres

Un composant de filtres réactifs conçu avec des micro-interactions et optimisé pour la prise en charge des thèmes sombres.

Ouvrir l’aperçu

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

Un composant de filtres conçu avec un style skeuomorphe, avec des effets réactifs et une prise en charge des thèmes sombres. Ce composant utilise Tailwind CSS pour le style et inclut des images et des avatars aléatoires.

Ouvrir l’aperçu

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

Composant Filtres

Un composant de filtres brutalistes avec Tailwind CSS, avec un design réactif, la prise en charge des thèmes sombres et des espaces réservés pour les images et les avatars.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col gap-4">
  <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Filters</h2>
  <div class="flex flex-col gap-2">
    <label class="block text-gray-700 dark:text-gray-300">Category:</label>
    <select class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
      <option>All</option>
      <option>Art</option>
      <option>Photography</option>
      <option>Music</option>
      <option>Technology</option>
    </select>
  </div>
  <div class="flex flex-col gap-2">
    <label class="block text-gray-700 dark:text-gray-300">Price Range:</label>
    <input type="range" min="0" max="100" class="border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-lg p-2" />
  </div>
  <div class="flex flex-col gap-2">
    <label class="block text-gray-700 dark:text-gray-300">Rating:</label>
    <select class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
      <option>All</option>
      <option>1 Star</option>
      <option>2 Stars</option>
      <option>3 Stars</option>
      <option>4 Stars</option>
      <option>5 Stars</option>
    </select>
  </div>
  <div class="flex justify-between">
    <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg">Reset</button>
    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg">Apply Filters</button>
  </div>
  <div class="mt-4">
    <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">Featured Users</h3>
    <div class="grid grid-cols-2 gap-4">
      <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-12 h-12 rounded-full" />
        <div>
          <h4 class="font-semibold">John Doe</h4>
          <p class="text-gray-600 dark:text-gray-300">Photographer</p>
        </div>
      </div>
      <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/women/80.jpg" alt="User Avatar" class="w-12 h-12 rounded-full" />
        <div>
          <h4 class="font-semibold">Jane Smith</h4>
          <p class="text-gray-600 dark:text-gray-300">Artist</p>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-4">
    <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">Featured Works</h3>
    <div class="grid grid-cols-1 gap-4">
      <img src="https://picsum.photos/200/150?random=1" alt="Featured Work" class="rounded-lg shadow-md" />
      <img src="https://picsum.photos/200/150?random=2" alt="Featured Work" class="rounded-lg shadow-md" />
      <img src="https://picsum.photos/200/150?random=3" alt="Featured Work" class="rounded-lg shadow-md" />
    </div>
  </div>
</div>

Composant Filtres

Un composant de filtres réactif conçu pour l’interface utilisateur en mode sombre à l’aide de Tailwind CSS. Il comprend des options pour filtrer le contenu, utilise des arrière-plans sombres et économise la batterie.

Ouvrir l’aperçu

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-xl font-bold mb-4">Filters</h2>
    <form>
        <div class="mb-4">
            <label for="category" class="block text-sm font-medium mb-2">Category</label>
            <select id="category" class="bg-gray-700 text-white border border-gray-600 rounded-md p-2 w-full">
                <option>All</option>
                <option>Technology</option>
                <option>Health</option>
                <option>Education</option>
                <option>Fashion</option>
            </select>
        </div>
        <div class="mb-4">
            <label for="price-range" class="block text-sm font-medium mb-2">Price Range</label>
            <input type="range" id="price-range" min="0" max="100" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
        </div>
        <div class="mb-4">
            <label class="block text-sm font-medium mb-2">Rating</label>
            <div class="flex space-x-1">
                <input type="radio" id="star5" name="rating" value="5" class="hidden">
                <label for="star5" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star4" name="rating" value="4" class="hidden">
                <label for="star4" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star3" name="rating" value="3" class="hidden">
                <label for="star3" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star2" name="rating" value="2" class="hidden">
                <label for="star2" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star1" name="rating" value="1" class="hidden">
                <label for="star1" class="cursor-pointer text-yellow-500">★</label>
            </div>
        </div>
        <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 rounded">Apply Filters</button>
    </form>
    <div class="mt-6">
        <h3 class="text-lg font-semibold mb-2">Featured Items</h3>
        <div class="grid grid-cols-1 gap-4">
            <div class="bg-gray-700 rounded-lg p-4 shadow">
                <img src="https://picsum.photos/200/150?random=1" alt="Random Item" class="mb-2 rounded-md">
                <h4 class="font-bold">Item Title</h4>
                <p class="text-sm">Description of the item.</p>
            </div>
            <div class="bg-gray-700 rounded-lg p-4 shadow">
                <img src="https://picsum.photos/200/150?random=2" alt="Random Item" class="mb-2 rounded-md">
                <h4 class="font-bold">Item Title</h4>
                <p class="text-sm">Description of the item.</p>
            </div>
            <div class="bg-gray-700 rounded-lg p-4 shadow">
                <img src="https://picsum.photos/200/150?random=3" alt="Random Item" class="mb-2 rounded-md">
                <h4 class="font-bold">Item Title</h4>
                <p class="text-sm">Description of the item.</p>
            </div>
        </div>
    </div>
</div>