JSFiddle - React, Tailwind, and code Playground

by Jake

HTML

<dialog>mod!</dialog>
<a href="#" id="showit">show</a>

SCSS

dialog {
  border: 1px solid silver;
  box-shadow: 0 0 20px hsla(0,0%,0%,.5);
  cursor: pointer;
  
  &::backdrop {
    background: hsla(0,0%,0%,.2);
  }
  
}

JavaScript

var d = document.querySelector('dialog');

d.addEventListener('click',function(e){
	this.close();
})

document.getElementById('showit').addEventListener('click',function(){
  d.show();
})