JSFiddle - React, Tailwind, and code Playground

by Samuel DeVore

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
  <div id="app">
    <counter></counter>
    <counter></counter>
    <counter></counter>
  </div>
</div>

JavaScript

Vue.component('counter', {
  data: function() {
    return {
      counter: 0
    }
  },
  template: `
  	<div>
		  <button @click="counter++" class="btn btn-success">{{ counter }}</button>
		</div>
  `
});

new Vue({
  el: '#app',
});