Advanced

                  
<!-- Multiple upload -->
<div class="relative">
  <div id="imageUpload" class="dropzone backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 multiple-dropzone mb-6">
    <div class="dz-message" data-dz-message>
      <div class="pre-upload flex ioajsklehsnm yhansklopals">
        <i class="text-5xl bi bi-cloud-arrow-up"></i>
        <div class="pb-3"><span>Drag & drop images here</span></div>
      </div>
      <div class="pre-upload text-center">
        <button
          class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-gradient-to-b from-purple-400 to-purple-600/90 hover:from-purple-400 hover:to-purple-600 focus:from-purple-400 focus:to-purple-600 focus:ring-0 rounded">Browse
          file</button>
      </div>
      <span class="after-upload">+</span>
    </div>
  </div>
</div>

<!-- Single upload -->
<div class="relative">
  <div id="imageSingle" class="dropzone backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 single-dropzone mb-6">
    <div class="dz-message" data-dz-message>
      <div class="pre-upload flex ioajsklehsnm yhansklopals">
        <i class="text-5xl bi bi-cloud-arrow-up"></i>
        <div class="pb-3"><span>Drag & drop images here</span></div>
      </div>
      <div class="pre-upload text-center">
        <button
          class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-gradient-to-b from-purple-400 to-purple-600/90 hover:from-purple-400 hover:to-purple-600 focus:from-purple-400 focus:to-purple-600 focus:ring-0 rounded">Browse
          file</button>
      </div>
    </div>
  </div>
</div>
                  
                

                  
<!-- text editor -->
<div class="relative">
  <label for="texteditor" class="inline-block mb-2">Example textarea with editor</label>
  <textarea
    class="texteditor w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0"
    id="texteditor" rows="3"></textarea>
</div>
                  
                

                  
<!-- Input Tags -->
<div class="relative mb-6">
  <label for="exampletags" class="inline-block mb-2">Input Tags</label>
  <input type="text" name="tags" value="Tags1, Tags2" class="tagify w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" id="exampletags" minlength="2">
</div>
                  
                

                  
<!-- Date Picker with Flatpickr -->
<div class="relative mb-6">
  <label for="flatpickr" class="mb-2 block">Select Date</label>
  <input type="text" id="flatpickr" class="w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" placeholder="Select a date">
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    flatpickr("#flatpickr", {
      dateFormat: "Y-m-d", // Format: YYYY-MM-DD
      altInput: true,
      altFormat: "F j, Y", // Human-friendly format
      allowInput: true
    });
  });
</script>

<!-- Date Range Picker with Flatpickr -->
<div class="relative mb-6">
  <label for="date-range" class="mb-2 block">Select Date Range</label>
  <input type="text" id="date-range" class="w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" placeholder="Select date range">
</div>


<script>
  document.addEventListener('DOMContentLoaded', function () {
    flatpickr("#date-range", {
      mode: "range", // Enable range mode for selecting two dates
      minDate: "today", // Start date selection from today
      dateFormat: "Y-m-d", // Format: YYYY-MM-DD
      altInput: true, // Show a more human-readable format
      altFormat: "F j, Y", // e.g. January 1, 2024
      allowInput: true
    });
  });
</script>