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">
  <link rel="stylesheet" href="./style.css">
  <title>Document</title>
</head>
<body>
  <div class="wrap">
    <div class="item">
    <h1>新增待辦項目</h1>
    <input type="text"    id="content">
    <select  id="select" onchange="input_color()">
        <option >一般</option>
        <option >重要</option>
        <option >緊急</option>
    </select>
   <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>
  

  <script src="./myjs.js">
  </script>
</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;
    
  }

  .general{
    color: green;
  }

  .important{
    color: orange;
  }

  .emergency{
    color: red;
  }
  
  .inputColor_general{
    background-color:#5FBB97;
  }
  
  .inputColor_important{
    background-color: #EDB88B;
  }

  .inputColor_emergency{
    background-color:#F7C1BB ;
  }

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);
    
    document.getElementById("content").value = "";

    let select = document.getElementById("select"); //取得select
    let index = select.selectedIndex; //取得選取的Option位置
    if(select.options[index].value == "一般"){
        sp.classList.add("general");
    }
    else if(select.options[index].value == "重要"){
        sp.classList.add("important");
    }
    else if(select.options[index].value == "緊急"){
        sp.classList.add("emergency");
    }
  }
  
  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";
    if(x.children[0].className == "general"){
        html+= "( " + num.toString() + " ) " + x.children[0].textContent + "\n";
    }
    else if(x.children[0].className == "important"){
        html+="( " + num.toString() + " ) " + "*" +x.children[0].textContent + "*\n";
    }
    else if(x.children[0].className == "emergency"){
        html+="( " + num.toString() + " ) " + "**" +x.children[0].textContent + "**\n";
    }
      num++;
    }
     alert("今日待辦事項\n" + html);
    
      
  }
  
function input_color(){
	let content = document.getElementById("content");
	let select = document.getElementById("select");
  let index = select.selectedIndex;
  if(select.options[index].value == "一般"){
  		content.className = "inputColor_general";
  }
 ...