Wizard

<!-- JS -->
<script src="assets/js/pages/wizard.init.js"></script>


<h3 class="text-center text-[30px] font-bold mb-4 dark:text-slate-300">Multiple Steps with Wizard Form</h3>
    <p class="text-center font-medium text-slate-400 text-[16px]">Enter a set of information to get started in an application.</p>
    <form action="" class=" block mt-5">
        <ul class="w-full list-none flex p-0 justify-center mb-10">
            <li class="progress-bar-dot block w-3 h-3 rounded-full border-2 border-primary-500 cursor-pointer transition duration-150 ease-out bg-primary-500"></li>
            <li class="progress-bar-connector block bg-primary-500 rounded-full w-20 h-[1px] mt-[5.5px]"></li>
            <li class="progress-bar-dot block w-3 h-3 rounded-full border-2 border-primary-500 cursor-pointer transition duration-150 ease-out "></li>
            <li class="progress-bar-connector block bg-primary-500 rounded-full w-20 h-[1px] mt-[5.5px]"></li>
            <li class="progress-bar-dot block w-3 h-3 rounded-full border-2 border-primary-500 cursor-pointer transition duration-150 ease-out"></li>
        </ul>
      
        <div class="step step1">
            <div class="grid md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4 mb-4">
                <div class="sm:col-span-12  md:col-span-12 lg:col-span-6 xl:col-span-6 ">
                    <div class="mb-2">
                        <label for="txtFirstNameBilling" class="font-medium text-sm text-slate-600 dark:text-slate-400">Contact Person</label>
                        <input type="text" id="txtFirstNameBilling" name="txtFirstNameBilling" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                    </div>
                    <div class="mb-2">
                        <label for="txtCompanyBilling" class="font-medium text-sm text-slate-600 dark:text-slate-400">Landline No.</label>
                        <input type="text" id="txtCompanyBilling" name="txtCompanyBilling" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                    </div>
                    <div class="mb-2">
                        <label for="txtAddress1Billing" class="font-medium text-sm text-slate-600 dark:text-slate-400">Address 1</label>
                        <textarea id="txtAddress1Billing"  name="txtAddress1Billing" rows="4" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700" placeholder="Leave a comment..."></textarea>
                    </div>
                    <div class="mb-2">
                        <label for="txtCityBilling" class="font-medium text-sm text-slate-600 dark:text-slate-400">Company Type</label>
                        <input type="text" id="txtCityBilling" name="txtCityBilling" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                    </div>
                    <div class="mb-2">
                        <label for="txtTelephoneBilling" class="font-medium text-sm text-slate-600 dark:text-slate-400">Product Category</label>
                        <input type="text" id="txtTelephoneBilling" name="txtTelephoneBilling" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                    </div>
                </div><!--end col-->  
                <div class="sm:col-span-12  md:col-span-12 lg:col-span-6 xl:col-span-6 ">
                    <div class="mb-2">
                        <label for="txtStateProvinceBilling" class="font-medium text-sm text-slate-600 dark:text-slate-400">Mobile No.</label>
                        <input type="text" id="txtStateProvinceBilling" name="txtStateProvinceBilling" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                    </div>
                    <div class="mb-2">
                        <label for="txtEmailAddressBilling" class="font-medium text-sm text-slate-600 dark:text-slate-400">Email Address</label>
                        <input type="text" id="txtEmailAddressBilling" name="txtEmailAddressBilling" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                    </div>
                    <div class="mb-2">
                        <label for="txtAddress2Billing" class="font-medium text-sm text-slate-600 dark:text-slate-400">Warehouse Address</label>
                        <textarea id="txtAddress2Billing"  name="txtAddress2Billing" rows="4" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700" placeholder="Leave a comment..."></textarea>
                    </div>
                    <div class="mb-2">
                        <label for="txtStateProvinceBilling" class="font-medium text-sm text-slate-600 dark:text-slate-400">Live Market A/C</label>
                        <input type="text" id="txtStateProvinceBilling" name="txtStateProvinceBilling" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                    </div>
                    <div class="mb-2">
                        <label for="txtFaxBilling" class="font-medium text-sm text-slate-600 dark:text-slate-400">Product Sub Category</label>
                        <input type="text" id="txtFaxBilling" name="txtFaxBilling" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                    </div>
                </div><!--end col-->            
            </div><!--end inner-grid-->                                             
        </div><!--end step1-->                                    
        <div class="step step2 hidden">
            <div class="grid md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4 mb-4">
                <div class="sm:col-span-12  md:col-span-12 lg:col-span-6 xl:col-span-6 ">
                    <div class="mb-2">
                        <label for="txtFirstNameShipping" class="font-medium text-sm text-slate-600 dark:text-slate-400">PAN Card</label>
                        <input type="text" id="txtFirstNameShipping" name="txtFirstNameShipping" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                    </div>
                    <div class="mb-2">
                        <label for="txtCompanyShipping" class="font-medium text-sm text-slate-600 dark:text-slate-400">CST No.</label>
                        <input type="text" id="txtCompanyShipping" name="txtCompanyShipping" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                    </div>
                    <div class="mb-2 md:mb-0">
                        <label for="txtCityShipping" class="font-medium text-sm text-slate-600 dark:text-slate-400">Company UIN</label>
                        <input type="text" id="txtCityShipping" name="txtCityShipping" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                    </div>
                </div><!--end col-->  
                <div class="sm:col-span-12  md:col-span-12 lg:col-span-6 xl:col-span-6 ">
                    <div class="mb-2">
                        <label for="txtLastNameShipping" class="font-medium text-sm text-slate-600 dark:text-slate-400">VAT/TIN No.</label>
                        <input type="text" id="txtLastNameShipping" name="txtLastNameShipping" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                    </div>
                    <div class="mb-2">
                        <label for="txtEmailAddressShipping" class="font-medium text-sm text-slate-600 dark:text-slate-400">Service Tax No.</label>
                        <input type="text" id="txtEmailAddressShipping" name="txtEmailAddressShipping" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                    </div>
                    <div class="mb-2 md:mb-0">
                        <label for="txtStateProvinceShipping" class="font-medium text-sm text-slate-600 dark:text-slate-400">Declaration</label>
                        <input type="text" id="txtStateProvinceShipping" name="txtStateProvinceShipping" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                    </div>
                </div><!--end col-->            
            </div><!--end inner-grid-->
        </div><!--end step2-->
    
        <div class="step step3 hidden">
            <div class="grid md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4 mb-4">
                <div class="sm:col-span-12  md:col-span-12 lg:col-span-6 xl:col-span-6 ">
                    <div class="mb-2">
                        <label for="txtNameCard" class="font-medium text-sm text-slate-600 dark:text-slate-400">Name on Card</label>
                        <input type="text" id="txtNameCard" name="txtNameCard" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                    </div>
                    <div class="mb-2">
                        <label for="txtCreditCardNumber" class="font-medium text-sm text-slate-600 dark:text-slate-400">Credit Card Number</label>
                        <input type="text" id="txtCreditCardNumber" name="txtCreditCardNumber" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                    </div>
                    <div class="mb-2">
                        <label for="txtExpirationDate" class="font-medium text-sm text-slate-600 dark:text-slate-400">Expiration Date</label>
                        <input type="text" id="txtExpirationDate" name="txtExpirationDate" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                    </div>
                </div><!--end col-->  
                <div class="sm:col-span-12  md:col-span-12 lg:col-span-6 xl:col-span-6 ">
                    <div class="mb-2">
                        <label for="countries" class="font-medium text-sm text-slate-600 dark:text-slate-400">Select your country</label>
                        <select id="countries" class="w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-[6.5px] focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                            <option value="">--Please Select--</option>
                            <option value="AE">American Express</option>
                            <option value="VI">Visa</option>
                            <option value="MC">MasterCard</option>
                            <option value="DI">Discover</option> 
                        </select>
                    </div>
                    <div class="mb-2">
                        <label for="txtCardVerificationNumber" class="font-medium text-sm text-slate-600 dark:text-slate-400">Verification Number</label>
                        <input type="text" id="txtCardVerificationNumber" name="txtCardVerificationNumber" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                    </div>
                    <label class="custom-label block dark:text-slate-300">
                        <div class="bg-white dark:bg-slate-700  border border-slate-200 dark:border-slate-600 rounded w-4 h-4  inline-block leading-4 text-center -mb-[3px]">
                          <input type="checkbox" class="hidden" checked="">
                          <i class="fas fa-check hidden text-xs text-primary-500"></i>
                        </div>
                        I agree with the Terms and Conditions.
                    </label>
                </div><!--end col-->            
            </div><!--end inner-grid-->
        </div><!--end step3-->
    
        <div class="flex justify-between">
            <button id="previous" class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded mb-1 float-left opacity-50 cursor-not-allowed" disabled tabindex="-1">
                previous
            </button>
            <div>
                <button id="next" class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded mb-1 float-right">
                    next
                </button>
                <button id="validate" type="submit" class="hidden  focus:outline-none text-green-500 hover:bg-green-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-green-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-green-500  text-sm font-medium py-1 px-3 rounded mb-1 float-right">
                    Submit
                </button>
            </div>
        </div>
    </form>