ToDo app tailwindcss Reactjs

import React, { useEffect, useState} from 'react'; import './styles/main.css' import TodoForm from "./components/TodoForm"; import TodoList from "./components/TodoList"; const LOCAL_STORAGE_KEY = "react-todo-list-todos" function App() { const [todos, setTodos] = useState([]) useEffect(() => { const storageTodos = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) if (storageTodos) { setTodos(storageTodos) } }, []) useEffect(() => { localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todos)) }, [todos]) function addTodo(todo) { setTodos([todo, ...todos]) } function toggleComplete(id) { setTodos( todos.map(todo => { if(todo.id === id) { return { ...todo, completed: !todo.completed } } return todo }) ) } function removeTodo(id) { setTodos(todos.filter(todo => todo.id !== id )); } return ( <div className="flex flex-col items-center h-screen bg-grey-300"> <h1 className="mb-20 mt-3 text-5xl text-teal-600 underline font-mono text-lg ">React Todo</h1> <TodoForm addTodo={addTodo}/> <TodoList todos={todos} toggleComplete={toggleComplete} removeTodo={removeTodo} /> </div> ); } export default App;