JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="app">

  <div class="note" :style="{ backgroundColor:notes[0].color }">

    <h3 class="title">
      <!-- 請顯示第一個項目的標題 -->
      {{ notes[0].title }}
    </h3>

    <p class="content">
      <!-- 請顯示第一個項目的內容 -->
      {{ notes[0].content }}
    </p>

  </div>

  <div class="note" :style="{ backgroundColor:notes[1].color }">

    <h3 class="title">
      <!-- 請顯示第二個項目的標題 -->
      {{ notes[1].title }}
    </h3>

    <p class="content">
      <!-- 請顯示第二個項目的內容 -->
      {{ notes[1].content }}
    </p>

  </div>

  <div class="note" :style="{ backgroundColor:notes[2].color }">

    <h3 class="title">
      <!-- 請顯示第三個項目的標題 -->
      {{ notes[2].title }}
    </h3>

    <p class="content">
      <!-- 請顯示第三個項目的內容 -->
      {{ notes[2].content }}
    </p>

  </div>

</div>

CSS

body{
    margin: 0;
}

#app{
    width: 80%;

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

    display: flex;
    justify-content:space-evenly;
    flex-wrap: wrap;
}

.note {
    width: 30%;

    padding-left: 15px;

    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",
                },
            ],

        }

    },
    mounted (){

        this.notes[0].content = '多出門、到處走走、也要多運動';
        
    }

}).mount('#app');