I have solved the task.

package.json

@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "uuid4": "^2.0.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.1"
   }
 }

src/App.js

@@ -1,12 +1,13 @@
+import React from "react";
 import "./App.css";
 // TODO: Import the todoData and pass it as a prop to the TodoList component
+import ToDoList from "./Components/ToDoList.js";
+import todoData from "./todoData.js";
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        {/* Call the TodoList Component Here */}
-      </header>
+      <ToDoList todoData={todoData} />
     </div>
   );
 }

src/Components/ToDoItem.js

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+
+const ToDoItem = ({ todo, handleDelete, handleEdit }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [changedText, setChangedText] = useState(todo.title);
+
+  const handleIsEditing = () => {
+    setIsEditing(!isEditing);
+  };
+
+  const handleChange = (event) => {
+    setChangedText(event.target.value);
+  };
+  return (
+    <div className="flex items-center justify-between bg-gray-100 px-4 py-3 mb-2 rounded-lg shadow-md">
+      {!isEditing ? (
+        <p className="text-lg">{todo.title}</p>
+      ) : (
+        <input
+          type="text"
+          className="w-full px-3 py-1 border border-gray-300 rounded-md focus:outline-none focus:border-indigo-500"
+          value={changedText}
+          onChange={handleChange}
+        />
+      )}
+      <div>
+        <button
+          type="button"
+          onClick={() => handleDelete(todo.id)}
+          className="bg-red-600 text-white px-3 py-1 rounded-md mr-2 hover:bg-red-700"
+        >
+          Delete
+        </button>
+        {isEditing ? (
+          <button
+            type="button"
+            onClick={() => {
+              setIsEditing(false);
+              handleEdit(todo.id, changedText);
+            }}
+            className="bg-green-600 text-white px-3 py-1 rounded-md hover:bg-green-700"
+          >
+            Save
+          </button>
+        ) : (
+          <button
+            type="button"
+            onClick={handleIsEditing}
+            className="bg-blue-600 text-white px-3 py-1 rounded-md hover:bg-blue-700"
+          >
+            Edit
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ToDoItem;

src/Components/ToDoList.js

@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import uuid4 from "uuid4";
+import ToDoItem from "./ToDoItem";
+
+function ToDoList({ todoData }) {
+  const [todoList, setToDoList] = useState(todoData);
+  const [newTodo, setNewTodo] = useState("");
+
+  const handleTextChange = (event) => {
+    setNewTodo(event.target.value);
+  };
+
+  const handleTodoCreate = () => {
+    if (newTodo === "") {
+      return;
+    }
+    const newTodoObj = {
+      id: uuid4(),
+      title: newTodo,
+      done: false,
+    };
+    setToDoList([...todoList, newTodoObj]);
+    setNewTodo("");
+  };
+
+  const handleSendByEnter = (event) => {
+    if (event.keyCode === 13) {
+      handleTodoCreate();
+    }
+  };
+
+  const handleDelete = (todoId) => {
+    setToDoList(todoList.filter((todo) => todo.id !== todoId));
+  };
+
+  const handleEdit = (todoId, editedTitle) => {
+    setToDoList(
+      todoList.map((todo) =>
+        todo.id === todoId ? { ...todo, title: editedTitle } : todo
+      )
+    );
+  };
+
+  return (
+    <div className="max-w-lg mx-auto px-4 py-8">
+      <h1 className="text-2xl font-bold mb-4 text-gray-800">To Do List:</h1>
+      <div className="flex mb-4">
+        <input
+          type="text"
+          placeholder="Add new task"
+          value={newTodo}
+          onChange={handleTextChange}
+          onKeyDown={handleSendByEnter}
+          className="flex-grow px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:border-indigo-500"
+        />
+        <button
+          onClick={handleTodoCreate}
+          className="bg-indigo-600 text-white px-4 py-2 rounded-r-md hover:bg-indigo-700"
+        >
+          Add
+        </button>
+      </div>
+      {todoList.map((todo) => (
+        <ToDoItem
+          key={todo.id}
+          todo={todo}
+          handleDelete={handleDelete}
+          handleEdit={handleEdit}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default ToDoList;

src/index.css

@@ -1,13 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 body {
+  background-color: #f3f4f6;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }

src/todoData.js

@@ -6,7 +6,7 @@ const todoData = [
   },
   {
     id: 2,
-    title: "Go bungee jumping",
+    title: "Go Fishing",
     done: false,
   },
   {

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};