Компоненты Фильтры Компонент фильтров

Компонент фильтров

Простой компонент фильтров, разработанный для блога или веб-сайта для потребления контента, следующий за пользовательским интерфейсом темного режима с монохроматической цветовой схемой. Он отличается адаптивной версткой с минимальным количеством элементов.

Предварительный просмотр

HTML-код

<div class="bg-gray-800 dark:bg-gray-900 p-5 rounded-md shadow-lg max-w-md mx-auto">
    <h2 class="text-white text-lg font-semibold mb-4">Filters</h2>
    <div class="mb-4">
        <label for="category" class="text-gray-300 dark:text-gray-400">Category</label>
        <select id="category" class="bg-gray-700 dark:bg-gray-800 text-white border border-gray-600 rounded-md w-full p-2 mt-1">
            <option>All</option>
            <option>Technology</option>
            <option>Health</option>
            <option>Lifestyle</option>
            <option>Travel</option>
        </select>
    </div>
    <div class="mb-4">
        <label for="author" class="text-gray-300 dark:text-gray-400">Author</label>
        <select id="author" class="bg-gray-700 dark:bg-gray-800 text-white border border-gray-600 rounded-md w-full p-2 mt-1">
            <option>All</option>
            <option>John Doe</option>
            <option>Jane Smith</option>
            <option>Chris Johnson</option>
        </select>
    </div>
    <div class="mb-4">
        <label class="text-gray-300 dark:text-gray-400">Sort By</label>
        <div class="flex space-x-4 mt-1">
            <label class="inline-flex items-center">
                <input type="radio" class="form-radio text-blue-500" name="sort" value="latest">
                <span class="ml-2 text-white">Latest</span>
            </label>
            <label class="inline-flex items-center">
                <input type="radio" class="form-radio text-blue-500" name="sort" value="popular">
                <span class="ml-2 text-white">Popular</span>
            </label>
        </div>
    </div>
    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md">Apply Filters</button>
</div>

Связанные компоненты

Компонент фильтров

Сложный, адаптивный, стилизованный под Glassmorphism компонент фильтров с аналогичной цветовой схемой для бизнес/корпоративных веб-сайтов. Имеет полупрозрачные элементы и эффекты размытия, с полной поддержкой темного режима с использованием Tailwind CSS. JavaScript не включен.

Открытый

БруталистФильтрыКомпонент

Компонент фильтров в бруталистском стиле с высокой контрастностью, смелой типографикой и необычными интервалами. Он включает в себя флажки, радиокнопки и ползунок ценового диапазона. Эффекты отклика достигаются с помощью медиазапросов и единиц измерения жидкости. Темный режим поддерживается через CSS.

Открытый

ФильтрыКомпонентныйНейроморфизм

Простой компонент адаптивных фильтров, стилизованный под мягкий пользовательский интерфейс Neumorphism, использующий цветовую схему в оттенках серого, разработанный для бизнес/корпоративных сайтов. Компонент поддерживает темный режим и собирается с помощью Tailwind CSS без какого-либо JavaScript.

Открытый