Application Modals Input with close Dark

<div
      class="fixed inset-0 z-50 grid place-content-center bg-black/50 p-4"
      role="dialog"
      aria-modal="true"
      aria-labelledby="modalTitle"
    >
      <div class="w-full max-w-md rounded-lg bg-white p-6 shadow-lg dark:bg-gray-900">
        <div class="flex items-start justify-between">
          <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
            Modal Title
          </h2>

          <button
            type="button"
            class="-me-4 -mt-4 rounded-full p-2 text-gray-400 transition-colors hover:bg-gray-50 hover:text-gray-600 focus:outline-none dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300"
            aria-label="Close"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="size-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>

        <div class="mt-4">
          <p class="text-pretty text-gray-700 dark:text-gray-200">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
            consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>

          <label for="Confirm" class="mt-4 block">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">
              Please type "Confirm" to complete action
            </span>

            <input
              type="text"
              id="Confirm"
              class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
            />
          </label>
        </div>

        <footer class="mt-6 flex justify-end gap-2">
          <button
            type="button"
            class="rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
          >
            Cancel
          </button>

          <button
            type="button"
            class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
          >
            Done
          </button>
        </footer>
      </div>
    </div>