JSFiddle - React, Tailwind, and code Playground

by erika_sun

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

.note{
  border:1px solid black;
  width:300px;
  margin:20px 10px;
  padding:3px 8px;
  text-align:center;
  border-radius:10px;
}

JavaScript

const {createApp} = Vue

createApp({
data() {
  return {
    notes: [
      {
        title: "春節行程安排",
        content: "吃飽睡，睡飽吃",
        color: "red",
      },
      {
        title: "工作待辦事項",
        content: "詢問各家廠商報價",
        color: "green",
      },
      {
        title: "運動健身計畫",
        content: "每天早上六點去健身",
        color: "blue",
      },
    ]
  }
}
}).mount('#app')