##### Book Your Online Cab

Pickup
Drop
Pickup Date
Pickup time
Pickup
Drop
Pickup Date
Pickup time
Return Date
Return time

    <!-- =======================
    Main Banner START -->
    <section class="pt-0 pt-lg-5">
    	<div class="container">
    		<div class="row">

    			<div class="col-lg-10 ms-auto position-relative">
    				<img src="assets/images/bg/03.jpg" class="rounded-3" alt="">

    				<!-- Search START -->
    				<div class="col-11 col-sm-10 col-lg-8 col-xl-6 position-lg-middle ms-lg-8 ms-xl-7">
    					<div class="card shadow pb-0 mt-n7 mt-sm-n8 mt-lg-0">

    						<!-- Card header -->
    						<div class="card-header border-bottom p-3 p-sm-4">
    							<h5 class="card-title mb-0">Book Your Online Cab</h5>
    						</div>

    						<!-- Card body START -->
    						<form class="card-body form-control-border p-3 p-sm-4">
    							<!-- Tabs START -->
    							<div class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    								<div class="form-check form-check-inline active" id="cab2-one-way-tab" data-bs-toggle="pill" data-bs-target="#cab2-one-way" role="tab" aria-controls="cab2-one-way" aria-selected="true">
    									<input class="form-check-input" type="radio" name="inlineRadioOptions" id="cabRadio1" value="option1" checked>
    									<label class="form-check-label" for="cabRadio1">One Way</label>
    								</div>
    								<div class="form-check form-check-inline" id="cab2-round-way-tab" data-bs-toggle="pill" data-bs-target="#cab2-round-way" role="tab" aria-controls="cab2-round-way" aria-selected="false">
    									<input class="form-check-input" type="radio" name="inlineRadioOptions" id="cabRadio2" value="option2">
    									<label class="form-check-label" for="cabRadio2">Round Trip</label>
    								</div>
    							</div>
    							<!-- Tabs END -->

    							<!-- Tabs content START -->
    							<div class="tab-content my-4" id="pills-tabContent">
    								<!-- One way START -->
    								<div class="tab-pane fade show active" id="cab2-one-way" role="tabpanel" aria-labelledby="cab2-one-way-tab">
    									<div class="row g-2 g-md-4">
    										<!-- Pickup -->
    										<div class="col-md-6 position-relative">
    											<div class="form-fs-lg form-control-transparent">
    												<label class="form-label small">Pickup</label>
    												<select class="form-select js-choice" data-search-enabled="true">
    													<option value="">Select location</option>
    													<option>New York</option>
    													<option>Canada</option>
    													<option>Paris</option>
    												</select>
    											</div>

    											<!-- Auto fill button -->
    											<div class="btn-flip-icon z-index-9 mt-2 mt-md-1">
    												<button class="btn btn-dark shadow btn-round mb-0"><i class="fa-solid fa-right-left"></i></button>
    											</div>
    										</div>

    										<!-- Drop -->
    										<div class="col-md-6 text-md-end">
    											<div class="form-fs-lg form-control-transparent">
    												<label class="form-label small ms-3 ms-md-0 me-md-3">Drop</label>
    												<select class="form-select js-choice" data-search-enabled="true">
    													<option value="">Select Location</option>
    													<option>Canada</option>
    													<option>New York</option>
    													<option>Paris</option>
    												</select>
    											</div>
    										</div>

    										<!-- Date -->
    										<div class="col-md-6">
    											<div class="form-fs-lg form-control-transparent">
    												<label class="form-label small">Pickup Date</label>
    												<input type="text" class="form-control flatpickr" placeholder="Select date">
    											</div>
    										</div>

    										<!-- Time -->
    										<div class="col-md-6 text-md-end">
    											<div class="form-fs-lg form-control-transparent">
    												<label class="form-label small ms-3 ms-md-0 me-md-3">Pickup time</label>
    												<input type="text" class="form-control flatpickr text-md-end" data-enableTime="true" data-noCalendar="true" placeholder="Select time">
    											</div>
    										</div>

    									</div>
    								</div>
    								<!-- One way END -->

    								<!-- Round trip START -->
    								<div class="tab-pane fade" id="cab2-round-way" role="tabpanel" aria-labelledby="cab2-round-way-tab">
    									<div class="row g-2 g-md-4">
    										<!-- Pickup -->
    										<div class="col-md-6 position-relative">
    											<label class="form-label small">Pickup</label>
    											<div class="form-fs-lg form-control-transparent">
    												<select class="form-select js-choice" data-search-enabled="true">
    													<option value="">Select Location</option>
    													<option>New York</option>
    													<option>Canada</option>
    													<option>Paris</option>
    												</select>
    											</div>

    											<!-- Auto fill button -->
    											<div class="btn-flip-icon z-index-9 mt-2 mt-md-1">
    												<button class="btn btn-dark shadow btn-round mb-0"><i class="fa-solid fa-right-left"></i></button>
    											</div>
    										</div>

    										<!-- Drop -->
    										<div class="col-sm-6 text-sm-end">
    											<label class="form-label small ms-3 ms-md-0 me-md-3">Drop</label>
    											<div class="form-fs-lg form-control-transparent">
    												<select class="form-select js-choice" data-search-enabled="true">
    													<option value="">Select Location</option>
    													<option>Canada</option>
    													<option>New York</option>
    													<option>Paris</option>
    												</select>
    											</div>
    										</div>

    										<!-- Date -->
    										<div class="col-sm-6">
    											<div class="form-fs-lg form-control-transparent">
    												<label class="form-label small">Pickup Date</label>
    												<input type="text" class="form-control flatpickr" placeholder="Select date">
    											</div>
    										</div>

    										<!-- Time -->
    										<div class="col-sm-6 text-sm-end">
    											<div class="form-fs-lg form-control-transparent">
    												<label class="form-label small ms-3 ms-md-0 me-md-3">Pickup time</label>
    												<input type="text" class="form-control flatpickr text-sm-end" data-enableTime="true" data-noCalendar="true" placeholder="Select time">
    											</div>
    										</div>

    										<!-- Date -->
    										<div class="col-sm-6">
    											<div class="form-fs-lg form-control-transparent">
    												<label class="form-label small">Return Date</label>
    												<input type="text" class="form-control flatpickr" placeholder="Select date">
    											</div>
    										</div>

    										<!-- Time -->
    										<div class="col-sm-6 text-sm-end">
    											<div class="form-fs-lg form-control-transparent">
    												<label class="form-label small ms-3 ms-md-0 me-md-3">Return time</label>
    												<input type="text" class="form-control flatpickr text-sm-end" data-enableTime="true" data-noCalendar="true" placeholder="Select time">
    											</div>
    										</div>
    									</div> <!-- Row END -->
    								</div>
    								<!-- Round trip END -->
    							</div>
    							<!-- Tabs content END -->

    							<!-- Button -->
    							<div class="d-grid">
    								<button class="btn btn-dark mb-0">Search Cabs</button>
    							</div>

    						</form>
    						<!-- Card-body END -->
    					</div>
    				</div>
    				<!-- Search END -->
    			</div>
    		</div> <!-- Row END -->
    	</div>
    </section>
    <!-- =======================
    Main Banner END -->

Copy-paste the stylesheet `<link>` into your `<head>` to load the CSS.

    <link rel="stylesheet" type="text/css" href="assets/vendor/flatpickr/css/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendor/choices/css/choices.min.css">

Copy-paste the following `<script>` near the end of your pages under Vendors to enable it.

    <script src="assets/vendor/flatpickr/js/flatpickr.min.js"></script>
    <script src="assets/vendor/choices/js/choices.min.js"></script>