سلام دوستان من به این صورت نوشتم ممنون میشم اگه پیشنهادی در جهت بهتر شدن داشتین بهم بگین
html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> .container { max-width: 300px; display: flex; flex-direction: column; margin: 0 auto; } #todo-app { margin: 1em; text-align: center; } #todo-list, #todo-stats { margin: 1em auto; text-align: left; width: 450px; } #todo-list { list-style: none; padding: 0; } #todo-stats { color: #777; } #new-todo { border-radius: 5px; } .todo-input { display: block; font-family: Helvetica, sans-serif; font-size: 20px; line-height: normal; margin: 5px auto 0; padding: 6px; width: 420px; } .todo-label { color: #444; font-size: 20px; font-weight: bold; text-align: center; } style> head> <body> <div id="root">div> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js" >script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" >script> <script src="https://unpkg.com/@babel/standalone/babel.min.js">script> <script type="text/babel"> function TodoListTitle() { return ( <label className="todo-label" htmlFor="new-todo"> What do you want to do today? label> ); } function TodoListInput() { return ( <input type="text" id="new-todo" className="todo-input" placeholder="type your tasks" /> ); } function CheckboxElem() { return <input type="checkbox" />; } function CheckboxTitle() { return <span className="todo-content">task 1span>; } function TodoListHandler() { return ( <div className="container"> <div id="todo-app"> <TodoListTitle /> <TodoListInput /> div> <div className="todo-list"> <div className="todo-item"> <CheckboxElem /> <CheckboxTitle /> div> div> div> ); } const $root = ReactDOM.createRoot(document.querySelector("#root")); $root.render(<TodoListHandler />); script> body> html>