JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app"></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 vm = Vue.createApp({
	template: `
    <div class="data-block">
      <div>Count: {{ count }}</div>
      <button @click="count++">Plus</button>
    </div>

    <div class="data-block">
      <div>Count: {{ count }}</div>
      <button @click="count++">Plus</button>
    </div>

    <div class="data-block">
      <div>Count: {{ count }}</div>
      <button @click="count++">Plus</button>
    </div>

    <div class="data-block">
      <div>Count: {{ count }}</div>
      <button @click="count++">Plus</button>
    </div>`,
    data () {
      return {
        count: 0
      }
    }
});


// vm.component();

vm.mount('#app');