JSFiddle - React, Tailwind, and code Playground

by superyngo

HTML

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <body>
    <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>
  </body>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
svg,
video {
  display: block;
}

* {
  margin: 0;
  padding: 0;
  font: inherited;
}

html {
  color-scheme: dark light;
}

body {
  min-height: 100svh;
  width: 100svw;
  /* border: 2px solid pink; */
  /* display: grid; */
}

div.note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 3rem;
  border: 0.1rem solid black;
  margin: 1rem 1rem;
  padding: 0 1rem;
}

JavaScript

const { createApp } = Vue;

createApp({
  data() {
    return {
      notes: [
        {
          title: "春節行程安排",
          content: "吃飽睡，睡飽吃",
          color: "red",
        },
        {
          title: "工作待辦事項",
          content: "詢問各家廠商報價",
          color: "green",
        },
        {
          title: "運動健身計畫",
          content: "每天早上六點去健身",
          color: "blue",
        },
      ],
    };
  },
  mounted() {
    console.log(this.notes);
    this.notes[0].content = "多出門、到處走走、也要多運動";
  },
}).mount("#app");