Web Resource App - Copy this React, Tailwind Component to your project

Hello, AI! I want to create a front end for a web application that provides resources related to website planning, design, and development. This website should feature a clean and easy to use UI/UX and a visually appealing design. Please create a front end based on the following requirements. ### 1. **Website Purpose** **Purpose**: An intuitive web application that allows users to easily search for website planning, design, and development resources and receive recommendations through AI. **Target Users**: Developers, designers, planners, and others who are interested in web development and design. ### 2. **Design Direction** **Stylish Minimalistic Design**: Maintain a simple yet modern design. Eliminate unnecessary complexity and create a user interface that allows users to quickly find the information they want. **Responsive Design**: Design the website responsively so that it provides the best layout on desktop, tablet, and mobile. **Visual Effects**: Add smooth animations and transitions as users navigate through the pages to enhance the visual appeal. ### 3. **Key Feature Requirements** #### **A. AI based Resource Recommendation UI** **User Input Window**: When a user enters keywords related to planning, design, and development, create a search window that recommends related resources. **AI Recommendation Results Display**: Create a UI that displays AI recommended resources in the form of cards. Each card should include the resource name, a brief description, an image, or an icon. #### **B. Filtering Function by Category** **Category Filter**: Add a drop down menu or button to filter resources by category, such as planning, design, and development. **Tag Filter**: Provide a function that allows users to filter resources by specific tags by tagging each resource. For example, when a user clicks a tag such as "UI Design" or "Front end Development", only related resources will be filtered. #### **C. Customized Dashboard** **Favorites Function**: Allow users to favorite resources (with a heart icon). Favorited resources should be visible on the dashboard. **Recently Viewed Resources**: Please add a recent history feature so that users can easily find recently viewed resources on the dashboard. ### 5. **Additional Requirements** **Reflecting User Feedback**: Please ensure that the user's selected filters or favorite settings are immediately reflected in the UI. **Providing Visual Materials**: Please provide preview images for each resource in the form of cards so that users can intuitively understand the content of the resource. **Animation Effects**: Please improve the user experience by adding smooth transition effects when moving pages or filtering. Based on these requirements, please implement the front end of the website beautifully. Please apply an intuitive and modern design so that users can easily find and manage the resources they want on the website. Thank you!