Use the native dialog element for this modal. Tailwind styles its content; showModal() supplies modal behavior, including a top-layer dialog and an inert background within this example document.

Version and setup

These examples are compiled with Tailwind CSS 3.3.2. Copy document includes the required CSS, so that document runs without a Tailwind installation. To use the utility classes in a project, follow the versioned setup guide.

This site customizes its spacing scale: p-10 is 10px here, while standard Tailwind 3 uses 2.5rem. The examples below use unaffected spacing keys or explicit arbitrary values. Check your project configuration before assuming a utility’s size. Tailwind 4 has a different setup; use its official installation guide for a new version-4 project.

Open and close the dialog

Use a named native modalLink

Tailwind CSS 3.3.2; the CSS tab includes the compiled styles.

HTML

<button
  type="button"
  id="open"
  class="px-4 py-3 text-white bg-blue-700 rounded"
>
  Open project note
</button>
<dialog
  aria-labelledby="heading"
  class="max-w-md p-4 border border-gray-500 rounded"
>
  <h2 id="heading" class="text-xl font-bold">Project note</h2>
  <p class="my-4">Read the instructions before you begin.</p>
  <button
    type="button"
    id="close"
    class="px-4 py-3 bg-blue-100 rounded"
    autofocus
  >
    Close note
  </button>
</dialog>
<script>
  const dialog = document.querySelector("dialog"); document.querySelector("#open").addEventListener("click", () => dialog.showModal()); document.querySelector("#close").addEventListener("click", () => dialog.close());
</script>

CSS

*,
::before,
::after {
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  background: none;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
}
img,
video {
  height: auto;
}
a {
  color: inherit;
  text-decoration: inherit;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.max-w-md {
  max-width: 28rem;
}
.rounded {
  border-radius: 0.25rem;
}
.border {
  border-width: 1px;
}
.border-gray-500 {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity));
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}
.bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}
.p-4 {
  padding: 1rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.font-bold {
  font-weight: 700;
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

dialog::backdrop {
  background: rgb(15 23 42 / 0.6);
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Tab to Open project note and activate it. Focus moves to Close note. Press Escape, then reopen and use Close note. Focus should return to the opening control. The close button calls close() without a network submission. A method="dialog" form can also close a dialog, but this preview deliberately blocks form submissions.

Style is not modal behavior

A fixed div and dark backdrop do not establish modal semantics, focus containment or Escape handling. A custom implementation must provide those deliberately. The browser’s dialog behavior is the reason this example stays compact.

Do not add flex directly to a closed dialog: overriding its display can accidentally reveal it while closed. Style a child wrapper if you need flex layout. The dialog is isolated within the preview; it cannot make the surrounding article inert. Continue with the native dialog reference.

Sources

Reference 1 Reference 2 provide the technical details and current compatibility information.