<button id="openDialog" class="bg-orange text-white font-semibold m-4 p-4 rounded hover:bg-orange-dark">Open modal</button>

<dialog id="dialog" class="bg-white   rounded-lg border-t-8 border-orange p-0   font-sans">
  <form  id="form" method="dialog">
  <header class="text-2xl text-center py-4 text-black bg-grey-lighter border-b border-grey-light"
                style="font-variant:small-caps"
    <span>confirm your order</span>
  </header>

    <p class="text-xl p-4 h-16 text-center leading-normal">By clicking 'YES', you confirm order. <u>This can't be undone</u>.</p>
    <footer class="actions flex">
       <button type="submit" class="bg-grey-dark flex-1 text-white p-2 no-button" value="no">No</button>
      <button type="submit" autofocus class="bg-orange flex-1 text-white p-2 yes-button" value="yes">YES</button>
     
    </footer>
 </form>
</dialog>

#dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.4)
}

.actions button {
    text-shadow: 1px 1px 5px black;
}

.no-button {
  border-bottom-left-radius: .5rem;
}

.yes-button {
  border-bottom-right-radius: .5rem;
}
const dialog = document.querySelector("#dialog");

const openDialogButton = document.querySelector("#openDialog");

openDialogButton.addEventListener("click", () => dialog.showModal());

dialog.addEventListener('close', () => console.log(dialog.returnValue ))

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.6.6/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.