Filter Component in React | Food Menu Card Component using React and Tailwind CSS
In this video, I describe how to filter React components based on category step by step. For styling, I used Tailwind CSS.
From this video, you will be able to learn how to filter by category, how to create a Card component, and how to pass props in React.
Additionally, I made the cards responsive using a grid system and used Tailwind CSS's light and dark themes. Here, I used the latest React version 19 and Tailwind CSS version 4.
Please SUBSCRIBE to my YouTube channel: https://www.youtube.com/@CodingConey
React and Tailwind CSS Installation Tutorial: https://youtu.be/HUZsyZ-qiYw
Source Code: https://github.com/fabihabushrapiyal/coding-coney/tree/main/react-small-projects/react-filter-food-menu-cards
GitHub Account: https://github.com/fabihabushrapiyal
Facebook Page: https://www.facebook.com/codingconey
Pinterest Account: https://www.pinterest.com/codingconey/
My Code Editor: VS Code - https://code.visualstudio.com/
Timecodes
0:00 – Intro / Project Preview
1:14 – File and Code Editor Setup Instructions
2:30 – Start Building Filter Card Component React Project
20:25 – Final Project Preview
Видео Filter Component in React | Food Menu Card Component using React and Tailwind CSS канала Coding Coney
From this video, you will be able to learn how to filter by category, how to create a Card component, and how to pass props in React.
Additionally, I made the cards responsive using a grid system and used Tailwind CSS's light and dark themes. Here, I used the latest React version 19 and Tailwind CSS version 4.
Please SUBSCRIBE to my YouTube channel: https://www.youtube.com/@CodingConey
React and Tailwind CSS Installation Tutorial: https://youtu.be/HUZsyZ-qiYw
Source Code: https://github.com/fabihabushrapiyal/coding-coney/tree/main/react-small-projects/react-filter-food-menu-cards
GitHub Account: https://github.com/fabihabushrapiyal
Facebook Page: https://www.facebook.com/codingconey
Pinterest Account: https://www.pinterest.com/codingconey/
My Code Editor: VS Code - https://code.visualstudio.com/
Timecodes
0:00 – Intro / Project Preview
1:14 – File and Code Editor Setup Instructions
2:30 – Start Building Filter Card Component React Project
20:25 – Final Project Preview
Видео Filter Component in React | Food Menu Card Component using React and Tailwind CSS канала Coding Coney
code webdevelopment frontend coding coney cony coding coney coding cony frontend development tutorial react filter by category react filtering data react filter component react filter products react filter list react filtering and sorting react filter button restaurent menu list filter button react react filter cards react card design react card animation react card grid tailwind css card tailwind css dark and light theme switcher react
Комментарии отсутствуют
Информация о видео
6 марта 2025 г. 1:00:34
00:21:30
Другие видео канала