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" integrity="sha512-EAEoidLzhKrfVg7qX8xZFEAebhmBMsXrIcI0h7VPx2CyAyFHuDvOAUs9CEATB2Ou2/kuWEDtluEVrQcjXBy9yw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="./text.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=Baloo+2&family=Noto+Sans+TC&display=swap" rel="stylesheet">
<div id="app">
   <div class="input">
      事項：<input type="text" placeholder="內容" v-model="addtitle">
      說明：<textarea ref="textarea" type="text" placeholder="詳細內容" v-model="addcontent"></textarea>
      緊急程度：<select v-model="color">
         <option value="blue">一般</option>
         <option value="green">重要</option>
         <option value="red">緊急</option>
      </select>
      <button @click="addNote">新增</button>
   </div>
   <div v-for="note in notes" :key="note.id" :style="{'background-color':note.color}" class="note">
      <h3 class="title" >
         {{note.title}}
      </h3>
      <p class="content">
         {{note.content}}
      </p>
      <button @click="delNote(note)">刪除</button>
   </div>
</div>

CSS

*{
   margin: 0;
   padding: 0;
   box-sizing: none;
   
}
.input{
   display: flex;
   flex-direction:column;
   margin: 2rem auto;
   font-size: 18px;
   padding: 15px;
   border-radius: 15px;
   width: 70%;
   background-color: rgb(159, 219, 199);
}
input,select,button{
   font-size: 12px;
   padding: 5px;
   margin: 5px 0;
   border-radius: 3px;
   border: none;
}


#app{
   display: flex;
   flex-direction:row;
   flex-wrap: wrap;
}
.note{
   min-width: 150px;
   margin: 0.3rem auto;
   padding: 1rem;
   width: 70%;
   border : 1px gray solid;
   border-radius: 5px;
}
h3{
   font-size: 20px;
   font-family: 'Noto Sans TC', sans-serif;
}
p{
   font-size: 16px;
   margin-top: 5px;
   font-family: 'Noto Sans TC', sans-serif;
}

JavaScript

const vm = Vue.createApp({
	data() {
   return {
      notes: [
         {
         id:1,
         title: "春節行程安排",
         content: "吃飽睡，睡飽吃",
         color: "red",
         },
         {
         id:2,
         title: "工作待辦事項",
         content: "詢問各家廠商報價",
         color: "green",
         },
         {
         id:3,
         title: "運動健身計畫",
         content: "每天早上六點去健身",
         color: "blue",
         },
      ]
      }
	},
   methods:{
      addNote() {
         if(this.addtitle.trim() !== "" && this.addcontent.trim() !== "" ){
            let newNote = {
               id: this.notes.length + 1,
               title: this.addtitle,
               content: this.addcontent,
               color: this.color,
            };
            this.notes.push(newNote);
            this.addtitle = '';
            this.addcontent = '';
            this.color = '';
         }
      },
      delNote(note){
         this.notes.splice(this.notes.indexOf(note), 1);
      },
   },
   watch:{
      notes: {
         handler: function(newNotes) {
                  localStorage.setItem('saveList', JSON.stringify(newNotes));
               }, // 監聽 notes 狀態變化
        deep: true, // 深度監聽，遞迴地監聽 notes 內部物件的變化
      },
   },
   mounted() {
      this.notes[0].content = "多出門、到處走走、也要多運動";
      this.notes = JSON.parse(localStorage.getItem('saveList')) || this.notes;
      autosize(this.$refs.textarea);
   },
}).mount('#app');