سلام خیلی هم ریز ترو عمیق‌تر هم میشه کرد .

        <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 Container() {
                return <div className="container">
                    <Todo_App />
                    <Todo_List />
                div>
            }
            function Todo_App() {
                return <div id="todo-app">
                    <label className="todo-label" htmlFor="new-todo">What do you want to do today?label>
                    <input type="text" id="new-todo" className="todo-input" placeholder="type your tasks" />
                div>
            }
            function Todo_List() {
                return <div className="todo-list">
                    <div className="todo-item">
                      <Todo_Checkbox />
                    <span className="todo-content">task 1span>
                div>
                div>
            }
            function Todo_Checkbox() {
                return <input type="checkbox" />
            }
            ReactDOM.render(<Container />, document.getElementById('root'))
        script>
    body>