Adaptive Booking Form - Copy this Html, Tailwind Component to your project
сделай-адаптивную-версию-и-добавь-надпись-где-выбор-количество-гостей-<div-class="booking-form-max-w-4xl-mx-auto-z-20-rounded-">-<div-class="flex-justify-center-items-center-p-4">-<form-class="w-full-w-2/3-inset-0-bg-opacity-80-backdrop-blur-md-rounded-lg-p-6-border-white-border">-<div-class="flex-flex-col-md:flex-row-md:space-x-4">-<div-id="date-range-picker"-date-rangepicker-class="flex-items-center-flex-1">-<div-class="relative">-<div-class="absolute-inset-y-0-start-0-flex-items-center-ps-3-pointer-events-none">-<svg-class="w-4-h-4-text-gray-500"-aria-hidden="true"-xmlns="http://www.w3.org/2000/svg"-fill="currentColor"-viewBox="0-0-20-20">-<path-d="M20-4a2-2-0-0-0-2-2h-2V1a1-1-0-0-0-2-0v1h-3V1a1-1-0-0-0-2-0v1H6V1a1-1-0-0-0-2-0v1H2a2-2-0-0-0-2-2v2h20V4ZM0-18a2-2-0-0-0-2-2h16a2-2-0-0-0-2-2V8H0v10Zm5-8h10a1-1-0-0-1-0-2H5a1-1-0-0-1-0-2Z"/>-</svg>-</div>-<input-id="datepicker-range-start"-name="start"-type="text"-class="bg-gray-50-border-border-gray-300-text-gray-900-text-sm-rounded-lg-block-w-full-ps-10-p-2.5-focus:outline-none"-placeholder="Дата-заезда"-required>-</div>-<span-class="mx-4-text-white">по</span>-<div-class="relative">-<div-class="absolute-inset-y-0-start-0-flex-items-center-ps-3-pointer-events-none">-<svg-class="w-4-h-4-text-gray-500"-aria-hidden="true"-xmlns="http://www.w3.org/2000/svg"-fill="currentColor"-viewBox="0-0-20-20">-<path-d="M20-4a2-2-0-0-0-2-2h-2V1a1-1-0-0-0-2-0v1h-3V1a1-1-0-0-0-2-0v1H6V1a1-1-0-0-0-2-0v1H2a2-2-0-0-0-2-2v2h20V4ZM0-18a2-2-0-0-0-2-2h16a2-2-0-0-0-2-2V8H0v10Zm5-8h10a1-1-0-0-1-0-2H5a1-1-0-0-1-0-2Z"/>-</svg>-</div>-<input-id="datepicker-range-end"-name="end"-type="text"-class="bg-gray-50-border-border-gray-300-text-gray-900-text-sm-rounded-lg-block-w-full-ps-10-p-2.5-focus:outline-none"-placeholder="Дата-выезда"-required>-</div>-</div>-<div-class="flex-items-center-mt-4-md:mt-0">-<button-type="button"-id="decrease"-class="bg-teal-600-text-white-rounded-l-md-px-4-py-2-hover:bg-teal-800-transition-duration-200-font-semibold-shadow-md-focus:outline-none">−</button>-<input-type="number"-id="guestCount"-value="1"-min="1"-class="w-12-text-center-mx-0-py-2-pl-3-focus:outline-none"-readonly>-<button-type="button"-id="increase"-class="bg-teal-600-text-white-rounded-r-md-px-4-py-2-hover:bg-teal-800-transition-duration-200-font-semibold-shadow-md-focus:outline-none">+</button>-</div>-<button-type="submit"-class="mt-4-md:mt-0-bg-teal-600-text-white-text-sm-font-medium-rounded-md-p-2-hover:bg-teal-800-transition-duration-200">Смотреть-номера</button>-</div>-</form>-</div>-</div>
