App - Copy this React, Tailwind Component to your project

Build a responsive ToDo app using React and Tailwind CSS that allows users to manage their tasks effectively. The app should support creating, editing, completing, and deleting ToDo items. Initial mock ToDo items should be provided for demonstration purposes. Requirements: App Structure: Create a main App component to house the ToDo list. Use functional components and hooks (useState, useEffect) for state management. Todo List Component: Label the section with a heading: "ToDo List". Display a list of initial mock ToDo items, e.g.: "Find that missing sock" "Finish the report" "Call the plumber" "Walk the dog" Each ToDo item should include: A checkbox to mark the item as complete. A "Delete" button that removes the item from the list (disabled until the item is marked complete). An "Edit" button to replace the ToDo string with a text input for editing. A "Save" button that appears when the text input is active, which saves the changes to the ToDo item. New ToDo Input: Include an input element to create new ToDo items, allowing users to add tasks to the list. A button to submit the new ToDo. Functionality: Use state to manage the list of ToDo items, including their completion status and edit state. Ensure that when editing, the original ToDo string is retained until changes are saved. Update the list dynamically when items are added, edited, or deleted. Styling: Use Tailwind CSS for styling to ensure the app is visually appealing and user friendly. Ensure that the layout is responsive, making it usable on both desktop and mobile devices. Accessibility: Ensure that all interactive elements (buttons, inputs) are accessible and usable via keyboard navigation. Initial Mock Data: Prepopulate the ToDo list with the following initial items: "Find that missing sock" "Finish the report" "Call the plumber" "Walk the dog" Bonus Features: Add a filter to show all, active, or completed ToDos.