JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript://" id="foo">Click me!</a>

CSS

#foo { color: #007fff; font-family: verdana }

.dialog-main { border: 5px solid #007fff; border-radius: 5px; position: fixed; font-family: verdana; font-size: 14px; background-color: #ffffff; overflow: hidden; }
.dialog-header { background-color: #007fff; color: #ffffff; padding: 10px; font-weight: 600 }
.dialog-content { padding: 0 5px 0 5px; overflow: auto }
.dialog-closebtn { float: right; margin-right: 5px; cursor: pointer }
.dialog-togglebtn { float: right; margin-right: 5px; cursor: pointer }
.dialog-expandbtn { float: right; margin-right: 5px; cursor: pointer }
.dialog-extrabtn { float: right; margin-right: 5px; cursor: pointer }
.dialog-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; }
.dialog-button { background-color: #007fff; color: #ffffff; border-radius: 5px; padding: 5px; cursor: pointer; margin-left: 5px; margin-bottom: 5px }
.dialog-btncontainer { margin-top: 10px; border-top: 1px solid #007fff; padding: 10px 0 5px 0; text-align: right }
.dialog-field { border: 1px solid #007fff; padding: 5px; font-family: verdana; font-size: 16px }
.dialog-fldcaption { margin-right: 5px }
.dialog-fldcontainer { text-align: right }
.dialog-fldblock { margin-top: 5px }

JavaScript

(function () {

"use strict";

function _default(settings, defaultProps) {
	if (!settings) settings = {};
	for (var i in defaultProps) if ( !(i in settings) ) settings[i] = defaultProps[i];
	return settings;
}

if (!window.innerWidth) {
	window.innerWidth = document.documentElement.clientWidth || document.body.clientWidth;
	window.innerHeight = document.documentElement.clientHeight || document.body.clientHeight;
}

function _selection(target, enable) {
	document.body.style.userSelect = enable ? "" : "none";
	target.onmousedown = target.onselectstart = target.ondragstart = enable ? null : function () { return false };
}

function _draggable(settings) {
	settings.dragAgent.onmousedown = function (outerEvent) {
		if (outerEvent.target.className.indexOf("btn") != -1) return false;
		if (settings.dragTarget.fullscreen) return false;
		settings.start && settings.start();
		var position = settings.dragAgent.getBoundingClientRect();
		var offsetY = outerEvent.pageY - position.top;
		var offsetX = outerEvent.pageX - position.left;
		document.onmousemove = function (innerEvent) {
			settings.dragTarget.style.top = (innerEvent.pageY - offsetY) + "px";
			settings.dragTarget.style.left = (innerEvent.pageX - offsetX) + "px";
		};
		document.onmouseup = function () {
			document.onmousemove = null;
			settings.end && settings.end();
		};
		return false;
	};
}

function _fx(target, prop, from, to, duration, callback) {
	if (!callback) callback = function () {};
	var start = +new Date();
	anim();
	function anim() {
		var m = (+new Date() - start) / duration;
		if (m > 1) m = 1; else setTimeout(anim, 17);
		if (m == 1) callback(target);
		target.style[prop] = (from + (to - from) * m) + (prop == "opacity" ? "" : "px");
		if (prop == "opacity") target.style.filter = "alpha(opacity=" + (from + (to - from) * m * 100) + ")";
	}
}

function _buttons(target, buttons) {
	var btnContainer = document.createElement("DIV");
	btnContainer.className = "dialog-btncontainer";
	for (var i in...