JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/lykmapipo/themify-icons/master/css/themify-icons.css">
<script src="https://rawgit.com/cristijora/vue-tab-wizard/master/dist/vue-tab-wizard.js"></script>
<link rel="stylesheet" href="https://rawgit.com/cristijora/vue-tab-wizard/master/dist/vue-tab-wizard.min.css">
<div id="app">
<div>
        <tab-wizard @on-complete="onComplete" 
                      shape="tab"
                      color="#9b59b6">
            <tab-content title="Personal details"
                         icon="ti-user" :before-change="beforeTabSwitch">
              My first tab content
            </tab-content>
            <tab-content title="Additional Info"
                         icon="ti-settings">
              My second tab content
            </tab-content>
            <tab-content title="Last step"
                         icon="ti-check">
              Yuhuuu! This seems pretty damn simple
            </tab-content>
        </tab-wizard>
 </div>
</div>

JavaScript

Vue.use(VueTabWizard)
new Vue({
 el: '#app',
 methods: {
  onComplete: function(){
      alert('Yay. Done!');
   },
   beforeTabSwitch: function(){
     alert("This is called before switchind tabs")
     return true;
   }
  }
})