JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="app">
  <div :style="{ background:notes[0].color , color : 'white' }" class="note">
    <h3 class="title">
       {{ notes[0].title }} 
    </h3>
    <p class="content">
       {{ notes[0].content }} 
    </p>
  </div>
  <div :style="{ background:notes[1].color , color : 'white' }" class="note">
    <h3 class="title">
      {{ notes[1].title }}
    </h3>
    <p class="content">
      {{ notes[1].content }} 
    </p>
  </div>
  <div :style="{ background:notes[2].color , color : 'white' }" class="note">
    <h3 class="title">
      {{ notes[2].title }}
    </h3>
    <p class="content">
      {{ notes[2].content }} 
    </p>
  </div>
</div>

CSS

#app{
  margin:0 auto;
  text-align:center;
}
.note{
  border:2px solid gray;
  border-radius:10px;
  width:50%;
  margin:0 auto;
  margin-bottom:10px;
  padding:5px;
  }
  .title{
    padding-bottom:10px;
    border-bottom:2px dotted gray;
  }

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