JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<button id="openFirstButton">Open first dialog</button>
<dialog id="firstDialog">
  <h2>First!</h2>
  <p>Thank you for visiting. We hope you find what you're looking for.</p>
  <button id="openSecondButton">Open another</button>
  <button id="closeFirstButton">Close</button>
</dialog>

<dialog id="secondDialog">
  <h2>Second!</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <button id="closeSecondButton">Close</button>
</dialog>

CSS

dialog {
  border: none;
  padding: 20px;
  background: white;
  color: black;
  border-radius: 6px;
  margin: 4rem auto;
  display: flex;
  flex-direction: column;
}

#firstDialog {
  height: 20rem;
}
dialog::backdrop {
  background: rgba(0,0,0,0.5);
}

JavaScript

const firstDialog = document.querySelector('#firstDialog');
const openFirstButton = document.querySelector('#openFirstButton');
const closeFirstButton = document.querySelector('#closeFirstButton');
openFirstButton.addEventListener('click', () => {
    firstDialog.showModal();
  });
closeFirstButton.addEventListener('click', () => {
    firstDialog.close();
});

const secondDialog = document.querySelector('#secondDialog');
const closeSecondButton = document.querySelector('#closeSecondButton');
openSecondButton.addEventListener('click', () => {
    secondDialog.showModal();
  });
closeSecondButton.addEventListener('click', () => {
    secondDialog.close();
});