JSFiddle - React, Tailwind, and code Playground

HTML

<a onclick="uiAlert('title', 'Your content <strong>here</strong> ...', 500);">Open</a>
<script>
function uiAlert(title, alertContent, width)
{
	var escHandler;
	var createAndAddElement = function(el, className, text, appendTo)
	{
		var el = document.createElement(el);
		if (className.length > 0)
			el.className = className;
		if (text.length > 0)
			el.innerHTML = text;
		appendTo.appendChild(el);
	};
	
	//Open the dialogue box
	var open = function()
	{	
		var body = document.getElementsByTagName("body")[0];
		createAndAddElement("div", "ui-background", "", body)
		
		var background = document.getElementsByClassName("ui-background")[0];
		createAndAddElement("div", "ui-content animated bounceIn", "", background);

		//add animation
		setTimeout(function(){ background.className = background.className + " ui-opacity"; }, 50);
		
		var content = document.getElementsByClassName("ui-content")[0];
		createAndAddElement("div", "ui-title", title, content);
		createAndAddElement("div", "ui-close", "close", content);
		createAndAddElement("div", "ui-body", alertContent, content);
		
		//add animation
		setTimeout(function(){ content.className = content.className + " ui-opacity"; }, 350);
		
		//add max-height
		var height = window.innerHeight || ( document.documentElement && document.documentElement.clientHeight ) || document.body.clientHeight || 500;
		content.style.maxHeight = (height - 75 - 15) + "px";
		content.style.width = width + "px";
		
		//Close box button
		var closeBtn = document.getElementsByClassName("ui-close")[0];
		closeBtn.addEventListener("click", function(){ close(); }, false);
		
		//add esc btn listener
		escHandler = function(key)
		{
			if( key.keyCode == 27 ) close();
		};
		( document.getElementsByTagName('body')[0] ).addEventListener("keyup", escHandler, false);
	};
	
	//Close the dialogue box
	var close = function()
	{
		//remove esc listener
		( document.getElementsByTagName('body')[0] ).removeEventListener("keyup", escHandler,...

CSS

.ui-background {
	position: fixed;
	width: 100%;
	height: 100%;
	opacity: 0;
	filter: alpha(opacity=0);
	background: rgba(0, 0, 0, .2);
	top: 0;
	left: 0;
	z-index: 998;
	transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
}
.ui-background.ui-opacity, .ui-content.ui-opacity {
	opacity: 1;
	filter: alpha(opacity=100);
}
.ui-content.ui-opacity{ margin-top: 75px; }
.ui-content {
	margin: 50px auto;
	width: 940px;
	padding: 0;
	position: relative;
	background: #fff;
	border: 1px solid #b4b4b4;
	z-index: 999;
	box-shadow: 0 0 25px rgba(0, 0, 0, .1);
	border-radius: 2px;
	max-height: 550px;
	overflow-y: auto;
	opacity: 0;
	filter: alpha(opacity=0);
	transition: all 200ms ease-in-out;
	-webkit-transition: all 200ms ease-in-out;
}
.ui-close, .ui-title {
	display: block;
	width: 200px;
	padding: 10px;
}
.ui-title {
	color: #b6b6b6;
	float: left;
}
.ui-close {
	text-align: right;
	float: right;
	cursor: pointer;
}
.ui-close a {
	text-decoration: none;
	color: #b6b6b6;
}
.ui-body {
	clear: both;
	border-top: 1px solid #cdcdcd;
	padding: 10px 10px 20px;
}