JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div id="app">
    <form>
        <div v-if="step === 1">
            <h1>Step One</h1>
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" name="name" id="name" v-model="registration.name">
            </div>
            <div class="form-group">
                <label for="name">Email</label>
                <input type="email" class="form-control" name="email" id="email" v-model="registration.email">
            </div>
            <div class="form-group">
                <button @click.prevent="next()" class="btn btn-primary">Next</button>
            </div>
        </div>
        <div v-if="step === 2">
            <h1>Step Two</h1>
            <div class="form-group">
                <label for="street">Street</label>
                <input type="text" class="form-control" name="street" id="street" v-model="registration.street">
            </div>
            <div class="form-group">
                <label for="city">City</label>
                <input type="text" class="form-control" name="city" id="city" v-model="registration.city">
            </div>
            <div class="form-group">
                <label for="state">State</label>
                <input type="text" class="form-control" name="state" id="state" v-model="registration.state">
            </div>
            <div class="form-group">
                <button @click.prevent="next()" class="btn btn-primary">Next</button>
            </div>
            <div class="form-group ml-auto">
                <button...

JavaScript

const app = new Vue({
  el:'#app',
  data() {
    return {
      step: 1,
      registration: {
        name: null,
        email: null,
        street: null,
        city: null,
        state: null,
        numtickets: 0,
        shirtsize: 'XL'
      }
    }
  },
  methods: {
    prev() {
      this.step--;
    },
    next() {
      this.step++;
    },
    submit() {
      alert('Form Submited!');      
    }
  }
});