JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <h1>待辦事項</h1>
  <div class="input-area">
    <input type="text" id="input" value="" placeholder="想記住什麼?">
    <button class="add-btn" onclick="add()">✓</button>
  </div>
</div>

<div class="container">
  <ul id="list">

  </ul>
</div>
<!-- <i class="fa-solid fa-trash-can"></i> -->

CSS

*{
  box-sizing: border-box;
  font-size: 12px;
  color: black;
}
body{
  background-color: SeaShell;
}
.container{
  width: 400px;
  margin: auto;
}
h1{
  text-align: center;
  font-size: 3rem;
}

/* input */

.input-area{
  display: flex;
  justify-content: center;
}
#input{
  flex: 1;
  margin: 5px;
  padding: 0.7rem;
  font-size: 1.5rem;
  border: 0px;
  border-radius: 5px;
}
#input:focus{
  border: 0.5px;
  outline: 2px solid lightgreen;
}
.add-btn{
  margin: 5px;
  width: 40px;
  font-size: 1.5rem;
  background-color: darkgray;
  color: black;
  cursor: pointer;
  border: 0px;
  border-radius: 5px;
}

/* list */

.container #list{
  justify-content: center;
  padding: 0px;
}
#list li{
  display: flex;
  justify-content: space-between;
  margin: 5px;
  padding: 0.7rem;;
  background-color: white;
  border-radius: 5px;
}
#list button{
  border: none;
  color: white;
  background-color: red;
  border-radius: 20px;
  cursor: pointer;
}
#list button:hover{
  background-color: lightgray;
  color: red;
}
li > span{
  font-size: 20px;
}

JavaScript

function add(){
	let input_ = document.getElementById('input');
  let list_ = document.getElementById('list');
  
  let li_ = document.createElement('li');
  let span_ = document.createElement('span');
  let btn_ = document.createElement('button');
  
	list_.append(li_);
  li_.append(span_);
  li_.append(btn_);
  
  let inputValue = input.value;
  span_.textContent = inputValue;
  btn_.textContent = 'Delete';
  btn_.onclick = remove;
  input.value = '';
}

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