Recipe Page - Copy this React, Tailwind Component to your project

Please design a Recipe Suggestions Page for the FreshSaver – Food Expiration and Waste Reduction Tracker. This page will provide users with recipe ideas based on the ingredients available in their virtual pantry, helping them use items before they expire to reduce food waste. The design should be visually appealing, functional, and easy to navigate. Here are the specific features and design elements: Recipe Suggestions Page Features: Recipe Card Grid: Display a grid of suggested recipes based on the user's pantry ingredients. Each recipe card should include: Recipe Image to make it visually engaging. Recipe Name prominently displayed. Ingredient Match: Show a small badge or icon indicating how many ingredients are matched with the pantry (e.g., "80% of ingredients available"). Detailed Recipe View: When a recipe card is clicked, open a detailed recipe view that includes: Recipe Image and Name at the top for visual appeal. Ingredients List with checkboxes next to each ingredient, allowing users to: Mark Ingredients as Used (e.g., checkbox toggles to mark used items). Save Ingredients they might want to use later (e.g., "saved" icon next to each item). Cooking Steps: Display step by step instructions for the recipe in a clear, readable format, with optional expand/collapse for each step for easy navigation. Filter and Search Options: Allow users to filter recipes based on their available ingredients (e.g., "recipes with dairy," "recipes with vegetables"). Option to search for recipes by meal type (e.g., breakfast, lunch, dinner) or cooking time (e.g., 15 mins, 30 mins, 1 hour). Additional Interactive Elements: A "Cook Now" button for users to easily mark all required ingredients as used, directly updating their pantry. Option to Save Recipes to a "Favorites" section for future reference. Provide a "View Similar Recipes" button under each recipe to suggest alternative ways to use available ingredients. Design Requirements: Use a clean and modern aesthetic with a soft color palette that complements the theme of food and freshness. Responsive layout for both mobile and desktop, with large, tappable buttons for easy interaction. Visual hierarchy and ample spacing for readability, especially in the ingredient list and cooking steps. Additional Features (Optional): Add a "Recipe Rating" based on user feedback to help users choose popular recipes. Display nutritional information below each recipe if available. Please provide a high fidelity design for the Recipe Suggestions Page that balances aesthetics and usability, with intuitive navigation and interactivity that encourages users to make the most of their pantry items