MK
Mayur Kamble

Sidebar Filter - Copy this React, Tailwind Component to your project

Create a responsive sidebar filter component using React and Tailwind CSS that includes multiple dropdowns for different categories like Categories, Rating, Price, etc. The Categories dropdown should contain a search input to filter the categories dynamically and a "See more" link to expand the list. The selected categories should appear with a blue checkbox, while unchecked items remain gray. The design should have a dark theme, as shown in the attached screenshot, with a minimalistic style. The sidebar filter includes: Categories Dropdown with: A search input to filter the categories. A limited list of categories with a "See more" option to display additional items. Blue checkboxes for selected categories and gray ones for unselected. Other Filter Options like Rating, Price, Shipping, Color, Delivery Method, Condition, and Weight, each with their own dropdown that expands on click. Ensure the entire layout is structured for a modern, clean, and accessible UI design using Tailwind CSS utilities. im mobile screen it should collaps and show hamburger icon to open it

Prompt
Component Preview

About

SidebarFilter - Create a responsive sidebar filter with dropdowns for Categories, Rating, Price, and more. Built with React and Tailwin. Get free template!

Share

Last updated 1 month ago