JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">

  <div class="display_form">

    <div class="add">

      <input type="text" placeholder="新增記事標題 . . ." v-model="title">

      <textarea placeholder="新增記事內容 . . ." v-model="content"></textarea>

      <select v-model="select_color">
        <option value="" disabled selected>選擇顏色</option>
        <option value="red">red_紅色</option>
        <option value="blue">blue_藍色</option>
        <option value="green">green_綠色</option>
      </select>

      <button @click="add_notes">新增</button>

    </div>

  </div>

  <div class="display_note">

    <div v-for='(notes_data,index) in notes' class="note" :style="{ backgroundColor:notes_data.color }">

      <h3 class="title">
        <!-- 請顯示第X個項目的標題 -->
        {{ notes_data.title }}
      </h3>

      <p class="content">
        <!-- 請顯示第X個項目的內容 -->
        {{ notes_data.content }}
      </p>

      <div style="text-align: right;"><button @click="del_notes(index)">刪除</button></div>

    </div>

  </div>

</div>

CSS

body{
    margin: 0;
}

#app{
    width: 80%;

    margin: 0 auto;
    margin-top: 30px;

    /* display: grid;
    grid-template-columns: 30% 30% 30%;
    justify-content: space-evenly;
    grid-row-gap: 30px; */


    border: 1px solid red;
}

.add{
    width: 80%;

    margin: 0 auto;
    margin-top: 30px;

    display: grid;
    grid-template-columns: 50%;
    justify-content: center;
    grid-row-gap: 20px;

    border: 1px solid red;
}
.add input{
    height: 20px;
}
.add textarea{
    resize:none;
    height: 100px;
}
.add select{
    height: 25px;
}
.add button{
    height: 25px;
}

.display_note{
    width: 80%;

    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;

    display: grid;
    grid-template-columns: 30% 30% 30%;
    justify-content: space-evenly;
    grid-row-gap: 30px;

    border: 1px solid red;
}

.note {
    padding-left: 15px;
    padding-right: 15px;

    display: grid;
    grid-template-rows: 0.5fr 1fr 0.5fr;

    border: 5px ridge black;
    border-radius: 20px;
}

JavaScript

const { createApp } = Vue;

createApp({

    data() {

        return {

            notes: [
                {
                    title: "春節行程安排",
                    content: "吃飽睡，睡飽吃",
                    color: "red",
                },
                {
                    title: "工作待辦事項",
                    content: "詢問各家廠商報價",
                    color: "green",
                },
                {
                    title: "運動健身計畫",
                    content: "每天早上六點去健身",
                    color: "blue",
                },
            ],
            title: '',
            content: '',
            select_color: ''

        }

    },
    mounted() {

        if(localStorage.getItem('save_notes')){

            this.notes = JSON.parse(localStorage.getItem("save_notes"));

        }

    },
    watch: {

        notes: {

            handler(newValue, oldValue) {

                save_notes = this.notes;

                localStorage.setItem("save_notes", JSON.stringify(save_notes));

            },
            deep: true

        }

    },
    methods: {

        add_notes() {

            this.notes.push({

                title: this.title,
                content: this.content,
                color: this.select_color

            })

        },
        del_notes(index) {

            this.notes.splice(index, 1);

        }

    }

}).mount('#app');