<div id="root">
  <div>
    <div class="bg-indigo-500 p-5 h-screen">
      <div class="max-w-[768px] m-auto bg-white p-5">
        <h1 class="text-center text-2xl mb-4">React ToDoList</h1>
        <div class="flex">
          <input type="text" class="w-full rounded-l-lg border-l-2 border-y-2 border-indigo-300 pl-4 focus:outline-indigo-500 focus:outline-none focus:outline-offset-0" placeholder="請輸入你的代辦事項" />
          <button class="w-[50px] h-[50px] border-0 bg-sky-500 hover:bg-sky-600 rounded-r-lg text-white transition duration-700">+</button>
        </div>
        <ul>
          <li class="py-4">
            <label>
              <input type="checkbox" />
              今天要洗碗
            </label>
          </li>
        </ul>
        <div class="flex justify-between items-center">
          <p>
            目前有 <span class="font-medium">1</span> 個事項待完成
          </p>

          <button type="button" class="bg-red-300 p-2 rounded-md hover:bg-red-400 transition duration-700">Clear All Task</button>
        </div>
      </div>
    </div>
  </div>
</div>