JSFiddle - React, Tailwind, and code Playground

by Gabriel Rodrigues

HTML

<div id="popup" class="popup">
  <img src="http://dummyimage.com/600x400/000/fff" alt="popup">
  <div>
    <button id="close">Sair</button>
  </div>
</div>

CSS

#popup {
  position: absolute;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 50px 2px #000;
  padding-bottom:5px;
}

#close{
  width:100px;
  background-color:#cc0033;
  color:#ffffff;
  border:none;
  margin-left:5px;
}

JavaScript

var close = document.getElementById('close');
var popup = document.getElementById('popup');

close.addEventListener("click", function() {
  popup.style.display = 'none';
});