JSFiddle - React, Tailwind, and code Playground

by Roman Joseph Rimorin

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">
<link rel="stylesheet" href="https://rawgit.com/cristijora/vue-form-wizard/master/dist/vue-form-wizard.min.css">
<script src="https://rawgit.com/cristijora/vue-form-wizard/master/dist/vue-form-wizard.js"></script>
<div id="app">
<div>
        <form-wizard @on-complete="onComplete" 
                      layout="vertical"
                      steps-classes="steps-size"
                      color="#3498db">
            <tab-content title="Site Info">
              My first tab content
            </tab-content>
            <tab-content title="Contact Info" icon="ti-settings">
              My second tab content
            </tab-content>
            <tab-content title="Device Info" icon="ti-check">
              Yuhuuu! This seems pretty damn simple
            </tab-content>
            <tab-content title="Front Desk" icon="ti-check">
              Yuhuuu! This seems pretty damn simple
            </tab-content>
            <tab-content title="AYS" icon="ti-check">
              Yuhuuu! This seems pretty damn simple
            </tab-content>
            <tab-content title="Spa" icon="ti-check">
              Yuhuuu! This seems pretty damn simple
            </tab-content>
            <tab-content title="GPOS: On-counter" icon="ti-check">
              Yuhuuu! This seems pretty damn simple
            </tab-content>
            <tab-content title="GPOS: Staff-facing" icon="ti-check">
              Yuhuuu! This seems pretty damn simple
            </tab-content>
            <tab-content title="P@T" icon="ti-check">
              Yuhuuu! This seems pretty damn simple
            </tab-content>
            <tab-content title="POS/PMS/Spa Info" icon="ti-check">
              Yuhuuu! This seems pretty damn simple
            </tab-content>
            <tab-content title="POS" icon="ti-check">
             ...

CSS

.steps-size{
    width: 200px;
    height: 100vh;
}

.wizard-icon-circle{
    width: 40px !important;
    height: 40px !important;
}

.wizard-icon-circle.checked{
  border-color: #00afbe !important;
}

.wizard-icon-container {
  background-color: #00afbe !important;
}

.active{
  color: #00afbe !important;
}

.wizard-tab-content {
  background: #f8f8f8;
  width: 100vw;
}

JavaScript

Vue.use(VueFormWizard)
new Vue({
 el: '#app',
 methods: {
  onComplete: function(){
      alert('Yay. Done!');
   }
  }
})