JSFiddle - React, Tailwind, and code Playground

by WoJWoJ

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="container">
  Power currently {{ status }}
  <button v-on:click="status = !status">
    <i v-bind:class="['fa', status ? 'fa-stop' : 'fa-play']" aria-hidden="true"></i>
  </button>
</div>

CSS

button {
  font-size: 30px;
}

JavaScript

new Vue({
  el: "#container",
  data: {
    status: false
  },
  watch: {
    status: function(val) {
      alert('status is now ' + val)
    }
  }
})