JSFiddle - React, Tailwind, and code Playground

HTML

<div class=form>
<label>TO DO List:</label>
<input type="text">
 <button>新增</button>
</div>
<ul>
  <li>
    <span>倒垃圾</span>
  </li>
  <li>
    <span>繳電話費</span>
  </li>
  <li>
    <span>採買本週食材</span>
  </li>
</ul>

CSS

body {
  background-color:#fff4e6;
}
.form {
  padding:20px
}
button{
   margin-left: 5px;
   background-color:#495057;
   padding:8px;
   border:1px solid gray;
   cursor:pointer;
   color:#fff;
}
li{
 margin-top:15px;
 border:1px solid #333;
 padding:10px;
 border-radius:20px
}
li span{
 padding:10px;
}

JavaScript

let list =document.querySelector('ul')
let btn =document.querySelector('button')
btn.onclick=add

function add(){
  let inputText=document.querySelector('input').value
  list.innerHTML+=`<li><span>${inputText}</span></li>`
}