<.modal id="modal-single-default">
  <h3 class="text-lg font-bold">Hello!</h3>
  <p class="py-4">Press ESC key or click the button below to close</p>
  <.modal_action>
    <form method="dialog">
      <!-- if there is a button in form, it will close the modal -->
      <.button>Close</.button>
    </form>
  </.modal_action>
</.modal>

<.modal id="modal-single-closes-when-click-outside">
  <:modal_box>
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">Press ESC key or click the button below to close</p>
  </:modal_box>
  <form method="dialog" class="modal-backdrop">
    <button>close</button>
  </form>
</.modal>

<.modal id="modal-single-dialog-modal-without-a-close-button-at-corner">
  <h3 class="text-lg font-bold">Hello!</h3>
  <p class="py-4">Press ESC key or click outside to close</p>
  <.modal_action>
    <form method="dialog">
    <!-- if there is a button in form, it will close the modal -->
      <.button>Close</.button>
    </form>
  </.modal_action>
</.modal>

<.modal id="modal-single-dialog-modal-with-custom-width">
  <:modal_box class="w-11/12 max-w-5xl">
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">Press ESC key or click the button below to close</p>
    <.modal_action>
      <form method="dialog">
        <!-- if there is a button, it will close the modal -->
        <.button>Close</.button>
      </form>
    </.modal_action>
  </:modal_box>
</.modal>

<.modal class="modal-bottom sm:modal-middle" id="modal-single-responsive">
  <:modal_box class="w-11/12 max-w-5xl">
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">Press ESC key or click the button below to close</p>
    <.modal_action>
      <form method="dialog">
        <!-- if there is a button in form, it will close the modal -->
        <button class="btn">Close</button>
      </form>
    </.modal_action>
  </:modal_box>
</.modal>