Datepicker

                  
<div class="mb-6">
  <label for="datepick" class="inline-block mb-2">Date picker</label>
  <div id="datepicks" class="flex flex-col justify-center md:flex-row md:justify-between">
    <input id="datepick" class="datepick w-full leading-5 relative text-sm py-2 px-4 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" type="text" name="start">
  </div>
</div>
<div class="mb-6">
  <label for="rangetime" class="inline-block mb-2">Start and End date</label>
  <div id="rangetime" class="flex flex-row justify-between">
    <input id="startDate" class="startDate w-full leading-5 relative text-sm py-2 px-4 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" type="text" name="start">
    <span class="px-4 text-center">to</span>
    <input id="endDate" class="endDate w-full leading-5 relative text-sm py-2 px-4 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" type="text" name="end">  
  </div>
</div>
                  
                

Demo config available in src/js/demo.js function myDatepicker();

Editing id value and configuration with javascript, please see example in demo.js. Read complete documentation in https://flatpickr.js.org/getting-started/