Fill all Information as below
Fill all Information as below
Fill all Information as below
Fill all Information as below
<ul class="nav nav-tabs justify-content-between border-0 mb-4 wizard-tabs" id="myTabstep" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link wh-48 bg-primary bg-opacity-10 rounded-circle p-0 active" id="step1-tab" data-bs-toggle="tab" data-bs-target="#step1-tab-pane" type="button" role="tab" aria-controls="step1-tab-pane" aria-selected="true">
<span class="fs-20 fw-bold text-primary">1</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link wh-48 bg-primary bg-opacity-10 rounded-circle p-0" id="step2-tab" data-bs-toggle="tab" data-bs-target="#step2-tab-pane" type="button" role="tab" aria-controls="step2-tab-pane" aria-selected="false">
<span class="fs-20 fw-bold text-primary">2</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link wh-48 bg-primary bg-opacity-10 rounded-circle p-0" id="step3-tab" data-bs-toggle="tab" data-bs-target="#step3-tab-pane" type="button" role="tab" aria-controls="step3-tab-pane" aria-selected="false">
<span class="fs-20 fw-bold text-primary">3</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link wh-48 bg-primary bg-opacity-10 rounded-circle p-0" id="step4-tab" data-bs-toggle="tab" data-bs-target="#step4-tab-pane" type="button" role="tab" aria-controls="step4-tab-pane" aria-selected="false">
<span class="fs-20 fw-bold text-primary">3</span>
</button>
</li>
</ul>
<div class="tab-content" id="myTabstepContent">
<div class="tab-pane fade show active" id="step1-tab-pane" role="tabpanel" aria-labelledby="step1-tab" tabindex="0">
<h4 class="fs-18 fw-semibold">General Information</h4>
<p class="text-gray-light mb-4">Fill all Information as below</p>
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">First Name</label>
<div class="form-group position-relative">
<input type="text" class="form-control text-dark ps-5 h-55" placeholder="Enter Name">
<i class="ri-user-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">Last Name</label>
<div class="form-group position-relative">
<input type="text" class="form-control text-dark ps-5 h-55" placeholder="Enter Name">
<i class="ri-user-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">Email Address</label>
<div class="form-group position-relative">
<input type="email" class="form-control text-dark ps-5 h-55" placeholder="Enter Email Address">
<i class="ri-mail-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">Phone</label>
<div class="form-group position-relative">
<input type="number" class="form-control text-dark ps-5 h-55" placeholder="Enter Phone Number">
<i class="ri-phone-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group mb-4">
<label class="label">Address</label>
<div class="form-group position-relative">
<input type="number" class="form-control text-dark ps-5 h-55" placeholder="Your Location">
<i class="ri-map-pin-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group d-flex gap-3">
<button class="btn btn-primary bg-primary bg-opacity-10 text-primary py-3 px-5 fw-semibold border-0">Back</button>
<button class="btn btn-primary py-3 px-5 fw-semibold text-white">Next</button>
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="step2-tab-pane" role="tabpanel" aria-labelledby="step2-tab" tabindex="0">
<h4 class="fs-18 fw-semibold">Personal Information</h4>
<p class="text-gray-light mb-4">Fill all Information as below</p>
<form>
<div class="row">
<div class="col-lg-12">
<div class="form-group mb-4">
<label class="label">Country</label>
<div class="form-group position-relative">
<select class="form-select form-control ps-5 h-55" aria-label="Default select example">
<option selected class="text-dark">United Kingdom</option>
<option value="1" class="text-dark">United States</option>
<option value="2" class="text-dark">Canada</option>
<option value="3" class="text-dark">France</option>
</select>
<i class="ri-map-2-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label">Town/City</label>
<div class="form-group position-relative">
<select class="form-select form-control ps-5 h-55" aria-label="Default select example">
<option selected class="text-dark">California</option>
<option value="1" class="text-dark">United States</option>
<option value="2" class="text-dark">Canada</option>
<option value="3" class="text-dark">France</option>
</select>
<i class="ri-list-ordered position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label">State</label>
<div class="form-group position-relative">
<select class="form-select form-control ps-5 h-55" aria-label="Default select example">
<option selected class="text-dark">South poal evenue state 4C</option>
<option value="1" class="text-dark">United States</option>
<option value="2" class="text-dark">Canada</option>
<option value="3" class="text-dark">France</option>
</select>
<i class="ri-font-size position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label">Zip Code</label>
<div class="form-group position-relative">
<input type="number" class="form-control ps-5 text-gray-light h-55" placeholder="Enter number">
<i class="ri-hashtag position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group mb-4">
<label class="label">Order Notes :</label>
<div class="form-group position-relative">
<textarea class="form-control ps-5 text-dark" placeholder="Some demo text ... " cols="30" rows="5"></textarea>
<i class="ri-information-line position-absolute top-0 start-0 fs-20 text-gray-light ps-20 pt-2"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group d-flex gap-3">
<button class="btn btn-primary bg-primary bg-opacity-10 text-primary py-3 px-5 fw-semibold border-0">Back</button>
<button class="btn btn-primary py-3 px-5 fw-semibold text-white">Next</button>
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="step3-tab-pane" role="tabpanel" aria-labelledby="step3-tab" tabindex="0">
<h4 class="fs-18 fw-semibold">Social Information</h4>
<p class="text-gray-light mb-4">Fill all Information as below</p>
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">Facebook</label>
<div class="form-group position-relative">
<input type="text" class="form-control text-dark ps-5 h-55" placeholder="URL">
<i class="ri-facebook-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">Twitter</label>
<div class="form-group position-relative">
<input type="text" class="form-control text-dark ps-5 h-55" placeholder="URL">
<i class="ri-twitter-x-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">Linkedin</label>
<div class="form-group position-relative">
<input type="email" class="form-control text-dark ps-5 h-55" placeholder="URL">
<i class="ri-linkedin-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">YouTube</label>
<div class="form-group position-relative">
<input type="number" class="form-control text-dark ps-5 h-55" placeholder="URL">
<i class="ri-youtube-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group d-flex gap-3">
<button class="btn btn-primary bg-primary bg-opacity-10 text-primary py-3 px-5 fw-semibold border-0">Back</button>
<button class="btn btn-primary py-3 px-5 fw-semibold text-white">Next</button>
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="step4-tab-pane" role="tabpanel" aria-labelledby="step4-tab" tabindex="0">
<h4 class="fs-18 fw-semibold">Any Note</h4>
<p class="text-gray-light mb-4">Fill all Information as below</p>
<form>
<div class="row">
<div class="col-lg-12">
<div class="form-group mb-4">
<label class="label">Order Notes :</label>
<div class="form-group position-relative">
<textarea class="form-control ps-5 text-dark" placeholder="Some demo text ... " cols="30" rows="5"></textarea>
<i class="ri-information-line position-absolute top-0 start-0 fs-20 text-gray-light ps-20 pt-2"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<button type="submit" class="btn btn-primary py-3 px-5 fw-semibold text-white">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
Fill all Information as below
Fill all Information as below
<ul class="nav nav-tabs justify-content-between border-0 mb-4 wizard-tabs2" id="myTabstep2" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link p-0 d-flex align-items-center active" id="step5-tab" data-bs-toggle="tab" data-bs-target="#step5-tab-pane" type="button" role="tab" aria-controls="step5-tab-pane" aria-selected="true">
<span class="fs-20 fw-bold text-primary wh-48 bg-primary bg-opacity-10 rounded-circle d-inline-block">1</span>
<div class="text-start ms-3">
<h4 class="fs-18 fw-semibold">General Information</h4>
<p class="text-gray-light mb-0">Fill all Information as below</p>
</div>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link p-0 d-flex align-items-center" id="step6-tab" data-bs-toggle="tab" data-bs-target="#step6-tab-pane" type="button" role="tab" aria-controls="step6-tab-pane" aria-selected="false">
<span class="fs-20 fw-bold text-primary wh-48 bg-primary bg-opacity-10 rounded-circle d-inline-block">2</span>
<div class="text-start ms-3">
<h4 class="fs-18 fw-semibold">Personal Info</h4>
<p class="text-gray-light mb-0">Setup Information</p>
</div>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link p-0 d-flex align-items-center" id="step7-tab" data-bs-toggle="tab" data-bs-target="#step7-tab-pane" type="button" role="tab" aria-controls="step7-tab-pane" aria-selected="false">
<span class="fs-20 fw-bold text-primary wh-48 bg-primary bg-opacity-10 rounded-circle d-inline-block">3</span>
<div class="text-start ms-3">
<h4 class="fs-18 fw-semibold">Social Links</h4>
<p class="text-gray-light mb-0">Add Social Links</p>
</div>
</button>
</li>
</ul>
<div class="tab-content" id="myTabstep2Content">
<div class="tab-pane fade show active" id="step5-tab-pane" role="tabpanel" aria-labelledby="step5-tab" tabindex="0">
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">First Name</label>
<div class="form-group position-relative">
<input type="text" class="form-control text-dark ps-5 h-55" placeholder="Enter Name">
<i class="ri-user-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">Last Name</label>
<div class="form-group position-relative">
<input type="text" class="form-control text-dark ps-5 h-55" placeholder="Enter Name">
<i class="ri-user-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">Email Address</label>
<div class="form-group position-relative">
<input type="email" class="form-control text-dark ps-5 h-55" placeholder="Enter Email Address">
<i class="ri-mail-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">Phone</label>
<div class="form-group position-relative">
<input type="number" class="form-control text-dark ps-5 h-55" placeholder="Enter Phone Number">
<i class="ri-phone-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group mb-4">
<label class="label">Address</label>
<div class="form-group position-relative">
<input type="number" class="form-control text-dark ps-5 h-55" placeholder="Your Location">
<i class="ri-map-pin-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group d-flex gap-3">
<button class="btn btn-primary bg-primary bg-opacity-10 text-primary py-3 px-5 fw-semibold border-0">Back</button>
<button class="btn btn-primary py-3 px-5 fw-semibold text-white">Next</button>
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="step6-tab-pane" role="tabpanel" aria-labelledby="step6-tab" tabindex="0">
<h4 class="fs-18 fw-semibold">Personal Information</h4>
<p class="text-gray-light mb-4">Fill all Information as below</p>
<form>
<div class="row">
<div class="col-lg-12">
<div class="form-group mb-4">
<label class="label">Country</label>
<div class="form-group position-relative">
<select class="form-select form-control ps-5 h-55" aria-label="Default select example">
<option selected class="text-dark">United Kingdom</option>
<option value="1" class="text-dark">United States</option>
<option value="2" class="text-dark">Canada</option>
<option value="3" class="text-dark">France</option>
</select>
<i class="ri-map-2-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label">Town/City</label>
<div class="form-group position-relative">
<select class="form-select form-control ps-5 h-55" aria-label="Default select example">
<option selected class="text-dark">California</option>
<option value="1" class="text-dark">United States</option>
<option value="2" class="text-dark">Canada</option>
<option value="3" class="text-dark">France</option>
</select>
<i class="ri-list-ordered position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label">State</label>
<div class="form-group position-relative">
<select class="form-select form-control ps-5 h-55" aria-label="Default select example">
<option selected class="text-dark">South poal evenue state 4C</option>
<option value="1" class="text-dark">United States</option>
<option value="2" class="text-dark">Canada</option>
<option value="3" class="text-dark">France</option>
</select>
<i class="ri-font-size position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label">Zip Code</label>
<div class="form-group position-relative">
<input type="number" class="form-control ps-5 text-gray-light h-55" placeholder="Enter number">
<i class="ri-hashtag position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group mb-4">
<label class="label">Order Notes :</label>
<div class="form-group position-relative">
<textarea class="form-control ps-5 text-dark" placeholder="Some demo text ... " cols="30" rows="5"></textarea>
<i class="ri-information-line position-absolute top-0 start-0 fs-20 text-gray-light ps-20 pt-2"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group d-flex gap-3">
<button class="btn btn-primary bg-primary bg-opacity-10 text-primary py-3 px-5 fw-semibold border-0">Back</button>
<button class="btn btn-primary py-3 px-5 fw-semibold text-white">Next</button>
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="step7-tab-pane" role="tabpanel" aria-labelledby="step7-tab" tabindex="0">
<h4 class="fs-18 fw-semibold">Social Information</h4>
<p class="text-gray-light mb-4">Fill all Information as below</p>
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">Facebook</label>
<div class="form-group position-relative">
<input type="text" class="form-control text-dark ps-5 h-55" placeholder="URL">
<i class="ri-facebook-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">Twitter</label>
<div class="form-group position-relative">
<input type="text" class="form-control text-dark ps-5 h-55" placeholder="URL">
<i class="ri-twitter-x-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">Linkedin</label>
<div class="form-group position-relative">
<input type="email" class="form-control text-dark ps-5 h-55" placeholder="URL">
<i class="ri-linkedin-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">YouTube</label>
<div class="form-group position-relative">
<input type="number" class="form-control text-dark ps-5 h-55" placeholder="URL">
<i class="ri-youtube-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group d-flex gap-3">
<button class="btn btn-primary bg-primary bg-opacity-10 text-primary py-3 px-5 fw-semibold border-0">Back</button>
<button type="submit" class="btn btn-primary py-3 px-5 fw-semibold text-white">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>