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>
<div id="app">
  <div class="form">
    <input type="text" placeholder="記事標題" v-model="newNote.title"><br>
    <textarea ref="textarea" name="" id="" cols="20" rows="3" placeholder="記事內容" v-model="newNote.content" ></textarea><br>
    <select name="" id="" v-model="newNote.color">
      <option value="">選擇顏色</option>
      <option value="red">紅色</option>
      <option value="green">綠色</option>
      <option value="blue">藍色</option>
    </select><br>
    <button class="add-btn" @click="add">新增</button>
  </div>
  <div v-for="(note, index) in notes" class="note" :class="note.color">
    <h3 class="title">
      {{note.title}}
    </h3>
    <p class="content">
      {{note.content}}
    </p>
    <button class="del-btn" :class="note.color" @click="remove(index)">X</button>
  </div>
</div>

CSS

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#app{
  display: flex;
  flex-direction: column;
  .note{
    width: 300px;
    margin: 1rem;
    text-align: center;
    border: #ccc 1px solid;
    padding: .25rem .5rem;
    border-radius: .5rem;
    box-shadow: 1px 1px 5px 1px;
    position: relative;
  }
}
.red{
  background-color: #f00;
}
.green{
  background-color: #0f0;
}
.blue{
  background-color: #00f;
}
.del-btn{
  border: none;
  cursor: pointer;
  color: #fff;
  position: absolute;
  top: 2px;
  right: 5px;
  &:hover{
    opacity: .8;
  }
}
.add-btn{
  padding: .25rem .5rem;
  border: none;
  background-color: #524c4c;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  &:hover{
    opacity: .8;
  }
}
.form{
  width: 333px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem;
}

JavaScript

const {createApp} = Vue
createApp({
  data() {
    return {
      notes: [
        {
          title: "春節行程安排",
          content: "吃飽睡，睡飽吃",
          color: "red",
        },
        {
          title: "工作待辦事項",
          content: "詢問各家廠商報價",
          color: "green",
        },
        {
          title: "運動健身計畫",
          content: "每天早上六點去健身",
          color: "blue",
        },
      ],
      newNote:{
        title: null,
        content: null,
        color: null,
      },  
    }
  },
  mounted(){
    this.notes[0].content= "多出門、到處走走、也要多運動";
    if(localStorage.getItem('notes')){
      this.notes = JSON.parse(localStorage.getItem('notes'));  
    }
    autosize(this.$refs.textarea);
  },
  methods: {
    add(){
      this.notes.push(this.newNote);
      this.newNote = {
        title: "",
        content: "",
        color: ""
      };  
    },
    remove(index){
      this.notes.splice(index, 1);
    },
    toggle(){
      this.ha = !this.ha;
    }
  },
  watch: {
    notes: {
      handler: function(newValue, oldValue){
        localStorage.setItem('notes', JSON.stringify(this.notes));
      },
      deep: true,   
    }
  }
}).mount("#app");