Modal

Modal Trigger

            
<!-- modal trigger -->
<button data-type="dialogs" data-target="#modal_xa" class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">Modal Trigger</button>

<!-- modal -->
<div id="modal_xa" class="[&.show_.backDialog]:opacity-90 [&.show]:opacity-100 [&.show]:h-full [&.show_.backDialog]:block [&.show_.backDialog]:inset-0 [&.show]:inset-0 duration-[400ms] ease-[cubic-bezier(0, 0, 0, 1)] opacity-0 w-full h-0 z-50 overflow-auto fixed left-0 top-0 flex items-center justify-center">
  <div data-close="#modal_xa" class="backDialog hidden z-40 overflow-auto fixed bg-primary-100 dark:bg-primary-900"></div>

  <!-- modal content -->
  <div class="z-50 flex flex-col w-11/12 sm:w-[480px] h-auto bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 rounded-xl shadow-inset-fixed">
    <div class="flex flex-col gap-4 justify-start px-8 pt-8 pb-0">
      <h3 class="text-lg mb-2">Basic dialog title</h3>
      <p class="text-sm tracking-[0.25px] leading-5">A dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made.</p>
    </div>
    <div class="flex flex-row justify-end gap-3 p-8">
      <button data-close="#modal_xa" class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">
        Cancel
      </button>

      <button class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">
        Save
      </button>
    </div>
  </div>
</div>