JSFiddle - React, Tailwind, and code Playground

by jasonblewis

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.css" integrity="sha256-PELQzdZwUQw2WSX3q4QLMSzDqQyWrmrXODp2bZy6JOU=" crossorigin="anonymous" />
    </head>

    <body>
	<div id="root" class="column is-half is-offset-one-quarter has-text-centered">
	    <h1>{{ title }}</h1>
	    <div>
		<button class="button is-large"  v-for="note in notes" v-text="note" v-on:click="myclick($event,note)"></button>
	    </div>
	    <div>
		<button class="button is-large is-primary">Next</button>
	    </div>
	    <div>
		<button class="button is-large is-primary">Stop</button>
	    </div>
	    currently playing {{ active }}

	</div>
	<script src="https://vuejs.org/js/vue.js"></script>
	<script>
	 var app = new Vue({
	     el: '#root',
	     data: {
		 notes: ['G','C','E','A'],
		 title: "Ukulele Tuner",
		 active: '',
	     },
	     methods: {
		 myclick: function(event,note) {
		     console.log(note);
		     this.active = note;
		 }
	     }
	 });
	</script>
    </body>