JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="wrap">
    <div class="item">
    <h1>新增待辦項目</h1>
    <input type="text"    id="content">
   <button onclick="addNew()">Add</button>
    </div>
  </div>
  
  <div class="wrap wrap_task">
   <div class="title">
      <h1>待辦清單</h1>
   </div>
    
    <ul id="task"></ul>
  </div>
  
  <div class="wrap wrap_output">
    <input type="button" value="匯出為純文字" class="output_text" onclick="alert_window()">
  </div>
  
</body>
</html>

CSS

*{
  padding:0px;
  margin:0px;
  box-sizing:border-box;
}


html,body{
  width:100%;
  height:100%;
  background-color:#6E0D25;
}


li{
  display:flex;
  align-items:center;
}

button, .rm{
  background-color:#904E55;
  color:white;
  font-weight:600;
  border:none;
  cursor:pointer;
  margin-left: 1rem;
  padding:2px 5px;
  font-size:20px;
  border-radius:5px;
}

span{
  font-size:30px;
  font-size:600;
  color:#6A381F;
}

.title{
  text-align:center;
}

.wrap{
 background-color:#FFFFB3;
 padding:2rem;
 margin:1rem;
 display:flex;
 justify-content:center;
 border-radius:20px;
}


.wrap_task{
  flex-direction:column;
}



#task li{
  display: flex;
  justify-content:space-around;
}

.wrap.wrap_output{
  background-color:#6e0d25;
}

.output_text{
  padding:1rem;
  border-radius:15px;
  border:none;
  background-color:#ffffb3;
  color:#6e0d25;
  font-size:20px;
  font-weight:600;
  cursor:pointer;
  transition: background-color 0.5s ease-in;
}

.output_text:hover{
  background-color:#F9AB55;
  
}

JavaScript

function addNew(){
  let content = document.getElementById("content").value;
  let ul = document.getElementById("task");
  let li = document.createElement("li");
  let sp = document.createElement("span");
  let rm_btn = document.createElement("input");
  rm_btn.type = "button";
  rm_btn.value = "remove";
  rm_btn.onclick = remove;
  rm_btn.classList.add("rm");
  
  
  ul.appendChild(li).appendChild(sp).append(content);
  li.appendChild(rm_btn);
}

function remove(e){
	e.target.parentElement.remove();
}



function alert_window(){
 	let ul_child = document.getElementById("task").children;
  let html = "";
  let num = 1;
  for(let x of ul_child){
    html += "( " + num.toString() + " ) " + x.children[0].textContent + "\n";
    num++;
  }
   alert("今日待辦事項\n" + html);
    
}