JSFiddle - React, Tailwind, and code Playground

by rhelminen

HTML

<dialog>
  <h1>Dialog content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste fuga molestiae ab maxime magnam quidem officia facere, explicabo minus laborum.</p>
  <button type="button" id="open-dropdown">Open dropdown</button>
  <div id="dropdown">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
  </div>
</dialog>

<button type="button" id="open-dialog">Open modal</button>

CSS

#dropdown {
  display: none;
  overflow: visible;
}

#dropdown div {
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  border: 1px solid slateblue;
}

button[data-open="true"] {
  position: relative;
}

button[data-open="true"] + #dropdown {
  position: absolute;
  /* position: fixed; */
  display: grid;
  gap: 0.2rem;
}

JavaScript

const dialog = document.querySelector('dialog')

document.querySelector('#open-dialog').addEventListener('click', () => {
	dialog.showModal()
  
  dialog.addEventListener('click', ({ target }) => {
  	if (target === dialog) dialog.close()
  })
})

const dropdownButton = document.querySelector('#open-dropdown')
dropdownButton.addEventListener('click', () => {
	dropdownButton.dataset.open = dropdownButton.dataset.open !== 'true'
})