JSFiddle - React, Tailwind, and code Playground

HTML

<div id="click">CLICK ME</div>

CSS

#click {
    background: orange;
    width: 150px;
    text-align: center;
    
}



// Apprise 1.5 by Daniel Raftery
// http://thrivingkings.com/apprise
//
// Button text added by Adam Bezulski
//
.appriseOverlay
	{
	position:absolute;
	top:0;
	left:0;
	background: semi-transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#A5000000,endColorstr=#A5000000)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A5000000,endColorstr=#A5000000);   /* IE6 & 7 */
    zoom: 1;
    background:rgba(0,0,0,0.65);
	background-image:url(images/bg1.png);
	display:none;
	opacity: 0.5;
	}
	
.appriseOuter
	{
	margin-top: 100px;
	margin-left: -90px;
	background:#eee;
	border:1px solid #fff;
	box-shadow:0px 3px 7px #333;
	-moz-box-shadow:0px 3px 7px #333;
	-webkit-box-shadow:0px 3px 7px #333;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	-khtml-border-radius:4px;
	position:absolute;
	z-index:99999999;
	min-width:200px;
	min-height:50px;
	max-width:75%;
	position:fixed;
	display:none;

	}
.appriseInner
	{
	padding:20px;
	color:#333;
	text-shadow:0px 1px 0px #fff;
	}
.appriseInner button
	{
	border:1px solid #bbb;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-khtml-border-radius:3px;
	background: -moz-linear-gradient(100% 100% 90deg, #eee, #d5d5d5);
  	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#d5d5d5));
  	background: -webkit-linear-gradient(#eee, #d5d5d5);
    background: -o-linear-gradient(#eee, #d5d5d5);
	color:#232d3d;
	font-size:12px;
	font-weight:bold;
	padding:4px 10px;
	margin:0 3px;
	text-shadow:0px 1px 0px #fff;
	cursor:pointer;
	box-shadow:0px 1px 2px #ccc;
	-moz-box-shadow:0px 1px 2px #ccc;
	-webkit-box-shadow:0px 1px 2px #ccc;
	}
.appriseInner button:hover
	{
    background: #bcbaba;
    color : WHITE;
	border-color: black;
	}
.aButtons, .aInput
	{
	margin:20px 10px 0px 10px;
	text-align:center;
	}
.aTextbox
	{
	border:1px solid...

JavaScript

$(document).ready(function() { 

    $("#click").click(function() { 
        $("<div>This is my content</div>").dialog({ width: 600, title:'Question # 1',
  closeOnEscape: false,
  open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },                                                   
  buttons: {
    'Confirm': function() {
       //do something
       $(this).dialog('close');
    },
    'Cancel': function() {
       $(this).dialog('close');
    },
    
    'Back': function() {
       $(this).dialog('close');
    },  
        
  }
});
    });
})





// Apprise 1.5 by Daniel Raftery
// http://thrivingkings.com/apprise
//
// Button text added by Adam Bezulski
//
function apprise(string, args, callback)
	{
	var default_args =
		{
		'confirm'		:	false, 		// Ok and Cancel buttons
		'verify'		:	false,		// Yes and No buttons
		'input'			:	false, 		// Text input (can be true or string for default text)
		'animate'		:	false,		// Groovy animation (can true or number, default is 400)
		'textOk'		:	'Ok',		// Ok button default text
		'textCancel'	:	'Cancel',	// Cancel button default text
		'textYes'		:	'Yes',		// Yes button default text
		'textNo'		:	'No'		// No button default text
		}
	
	if(args) 
		{
		for(var index in default_args) 
			{ if(typeof args[index] == "undefined") args[index] = default_args[index]; } 
		}
	
	var aHeight = $(document).height();
	var aWidth = $(document).width();
	$('body').append('<div class="appriseOverlay" id="aOverlay"></div>');
	$('.appriseOverlay').css('height', aHeight).css('width', aWidth).fadeIn(100);
	$('body').append('<div  class="appriseOuter"></div>');
	$('.appriseOuter').append('<div class="appriseInner"></div>');
	$('.appriseInner').append(string);
    $('.appriseOuter').css("left", ( $(window).width() - $('.appriseOuter').width() ) / 2+$(window).scrollLeft() + "px");
    	
		
		
		
	$('div.appriseOuter').draggable(); // MOD: draggable pop-up
	$(function() {		 // MOD: PIE.js for IE
		if (window.PIE)...