JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<button id="pop-up-btn">popup</button>

CSS

.pop-up-box{
    opacity: 0;
    transition: opacity 1s;
}
.pop-active .pop-up-box{
    opacity: 1;
}

JavaScript

var body = document.getElementsByTagName('body')[0];
var btn  = document.getElementById("pop-up-btn");
var popUp = document.createElement("div");

btn.on("click", function(){
	body.appendChild(popUp);
	popUp.classList("pop-up-box");
	popUp.innerHTML = "You clicked the button!";
	body.classList.add("pop-active");
});