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/6.0.1/autosize.min.js" integrity="sha512-OjjaC+tijryqhyPqy7jWSPCRj7fcosu1zreTX1k+OWSwu6uSqLLQ2kxaqL9UpR7xFaPsCwhMf1bQABw2rCxMbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="app">

        <div class="display_form">

            <div class="add">

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

                <textarea placeholder="新增記事內容 . . ." v-model="content" ref="textarea_use_autosize"></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() {

        autosize(this.$refs.textarea_use_autosize);

        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');