JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/vue@next"></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({ });


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

app.mount('#app');