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">
    <h3 class="title">
      {{ notes[0].title }}
    </h3>
    <p class="content">
      {{ notes[0].content}}
    </p>
  </div>
  <div class="note">
    <h3 class="title">
      {{ notes[1].title }}
    </h3>
    <p class="content">
      {{ notes[1].content}}
    </p>
  </div>
  <div class="note">
    <h3 class="title">
      {{ notes[2].title}}
    </h3>
    <p class="content">
      {{ notes[2].content}}
    </p>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #202124;
}

#app {
  display: grid;
  grid-template-columns: repeat(auto-fit, 240px);
  grid-gap: 16px;
  justify-content: center;
  padding: 20px;
}

.note {
  width: 240px;
  border: 1px solid #5f6368;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 18px;
  color: #fff;
}

.content {
  margin-top: 4px;
}

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