Modal

<button
  type="button"
  class="btn btn-primary"
  aria-haspopup="dialog"
  aria-expanded="false"
  aria-controls="my-modal"
  data-overlay="#my-modal"
>
  Open Modal
</button>

<div
  id="my-modal"
  class="overlay modal overlay-open:opacity-100 hidden"
  role="dialog"
  tabindex="-1"
>
  <div class="modal-dialog overlay-open:opacity-100">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Modal Title</h3>
        <button
          type="button"
          class="btn btn-text btn-circle btn-sm absolute end-3 top-3"
          aria-label="Close"
          data-overlay="#my-modal"
        >
          <span class="icon-[tabler--x] size-4"></span>
        </button>
      </div>
      <div class="modal-body">
        Modal content goes here.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-soft btn-secondary" data-overlay="#my-modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">
          Save
        </button>
      </div>
    </div>
  </div>
</div>