JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TODOLIST</title>
    <link rel="stylesheet" href="index.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;400&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="todolist">
      <h1>My Memo List</h1>
      <div class="inputdiv">
        <input id="listtext" type="text" placeholder="請輸入文字..." />
        <button id="listadd">+</button>
      </div>
      <ul id="memolist">
        <!-- <li><div>買肉泥</div></li> -->
      </ul>
    </div>
    <script src="index.js"></script>
  </body>
</html>

CSS

* {
  padding: 0;
  margin: 0;
  font-family: "Noto Sans TC", sans-serif;
}
body {
  background-color: #e6c35c;
}
h1 {
  color: #e6c35c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.todolist {
  background-color: rgba(255, 255, 255, 0.5);
  margin: 50px auto;
  padding: 20px;
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
input {
  font-size: 10px;
  border: 0;
  border-radius: 50px;
  padding: 2px 10px;
  background-color: white;
  margin-right: 5px;
}
.inputdiv {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inputdiv > button {
  border-radius: 50px;
  width: 30px;
  background: #e6c35c;
  color: white;
  font-size: 10px;
  border: 2px solid white;
}
.inputdiv > button:hover {
  background: white;
  color: #e6c35c;
  border: 2px dashed #e6c35c;
  font-weight: 800;
}
ul {
  margin-top: 10px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 250px;
}

li {
  font-size: 10px;
  color: rgb(80, 80, 80);
  background-color: #e6c35c;
  width: 100%;
  padding: 10px;
  /* border-bottom: 1px solid black; */
  list-style-type: none;
  margin-top: 5px;
}
li:hover {
  background-color: #d9be6f;
  border-bottom: 2px solid white;
  color: rgb(255, 255, 255);
}

JavaScript

// DOM
var memolist = document.getElementById("memolist");
var listtext = document.getElementById("listtext");
var listadd = document.getElementById("listadd");

// 檢查
console.log(memolist, listtext, listadd);

//點新增按鈕觸發事件
listadd.addEventListener("click", function () {
  var li = document.createElement("li");
  var div = document.createElement("div");
  div.textContent = listtext.value;
  // memolist裡面新增li元素
  memolist.append(li);
  //li元素裡面新增div+輸入的文字
  li.append(div);
});