JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
</div>

SCSS

#app {
  display: block;
  padding: 1rem;
  font-size: 1rem;
}

.data-block {
  display: inline-block;
  background-color: #f1f1f1;
  padding: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #aaa;
  line-height: 2;
  font-size: 1.2rem;

button {
    font-size: 1.2rem;
  }
}

JavaScript

const app = Vue.createApp({ });

// 共用的狀態
const $data = {
  count: 0
};


app.component('my-component', {
  template: `
	  <div class="data-block">
	    <div>Count: {{ count }}</div>
  	  <button @click="count++">Plus</button>
		</div>
  `,
  data () {
    return $data;
  }
});

app.mount('#app');