JSFiddle - React, Tailwind, and code Playground

by evon0306

HTML

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link rel="stylesheet" href="./text.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Baloo+2&family=Noto+Sans+TC&display=swap" rel="stylesheet">
<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: none;
}
#app{
   display: flex;
   flex-direction:row;
   flex-wrap: wrap;
}
.note{
  min-width: 150px;
   margin: 0.3rem;
   padding: 1rem;
   border : 2px gray solid;
   border-radius: 5px;
}
h3{
   font-size: 20px;
   font-family: 'Noto Sans TC', sans-serif;
}
p{
   font-size: 16px;
   margin-top: 5px;
   font-family: 'Noto Sans TC', sans-serif;
}

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