JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.20/autosize.min.js"></script>
<div id="app">
  <h1>To Do List</h1>
  <input v-model="title" placeholder="to do title" />
  <br />
  <textarea v-model="item" placeholder="to do item."></textarea>
  <br />
  <select v-model="color">
    <option disabled selected value="">Please select one color..</option>
    <option>Red</option>
    <option>Green</option>
    <option>Blue</option>
  </select>
  <button @click="add">Add</button>
  <hr />
  
  <li v-for="(note,index) of notes"
       :style="{ background : note.color , color:'white' , 'font-weight':'bold'}"
   >
    {{ note.title }} : {{ note.content }} 
    <button @click="del(index)" 
       :style="{ background : note.color ,
                      color : 'white',
                      border : 'none'
                      }">X</button>
  </li>
  
</div>

CSS

*{
  margin:0 auto;
  margin:10px;
}
li{
  border-radius:10px;
  margin-bottom:10px;
  padding:10px;
}

JavaScript

const { createApp } = Vue

  createApp({
    data() {
      return {
        notes: [
          {
            title: "春節行程安排",
            content: "吃飽睡，睡飽吃",
            color: "red",
          },
          {
            title: "工作待辦事項",
            content: "詢問各家廠商報價",
            color: "green",
          },
          {
            title: "運動健身計畫",
            content: "每天早上六點去健身",
            color: "blue",
          },
        ]
      }
    },
    mounted() {
      this.notes[0].content = "多出門、到處走走、也要多運動";
      this.color="";
      if(localStorage.getItem('lists')){
      	this.notes = JSON.parse(localStorage.getItem('lists'));
      };
      autosize(document.querySelector("textarea"));
    },
    methods:{
    	add(){
      	if(this.title === "" || this.item === "" || this.color===""){
        	alert("Check out title、content and select color");
          return;
        };
        const newlist={
        	title:this.title,
          content:this.item,
          color:this.color,
        };
        this.notes.push(newlist);
        this.title="";
        this.item="";
        this.color="";
      },
      del(index){
      	this.notes.splice(index,1);
      }
    },
    watch:{
      notes:{
        handler(){
           localStorage.setItem("lists", JSON.stringify(this.notes));
        },
        deep:true,
      }
    },
  }).mount('#app')