JSFiddle - React, Tailwind, and code Playground

HTML

<body>

</body>

JavaScript

/** Dialog **/

	var Dialog = function(name, width)
	{
		// Cria frame do dialog
		var dlgFrame = document.createElement('div');
		dlgFrame.id = name;
		dlgFrame.style.display = 'none';
		dlgFrame.setAttribute("data-dialog", name);
		
		// Cria o container para os componentes
		var dlgContainer = document.createElement('div');
		dlgContainer.style.width = width;
		dlgContainer.setAttribute("data-dialog-width", width);
		
		// Cria espaço para o título
		var dlgTitle = document.createElement('div');
		dlgTitle.setAttribute("data-dialog-title", name);
		
		// Cria espaço para os botões
		var dlgButton = document.createElement('div');
		dlgButton.setAttribute('data-dialog-buttons', name);
		
		// Monta os componentes
		dlgContainer.appendChild(dlgTitle);
		dlgContainer.appendChild(dlgButton);
		dlgFrame.appendChild(dlgContainer);
		document.body.appendChild(dlgFrame);
		
		// Cria as variáveis
		this.dlg = document.querySelector('[data-dialog="'+name+'"]');
		this.title = document.querySelector('[data-dialog-title="'+name+'"]');
		this.buttons = document.querySelector('[data-dialog-buttons="'+name+'"]');
	}
	
	Dialog.prototype.show = function(display)
	{
		this.dlg.style.display = display || "flex";   
	};
	
	Dialog.prototype.close = function()
	{
		this.dlg.style.display = 'none';
	};
	
	Dialog.prototype.setTitle = function(title)
	{
		this.title.innerHTML = title;
	}
	
	Dialog.prototype.addButton = function(text, callback)
	{
		// Cria os elementos
		var button = document.createElement('button');
		var text = document.createTextNode(text);
		
		// Define o texto e o evento
		button.appendChild(text);
		button.addEventListener("click", function()
		{
			// todo: verificação do typeof
			callback();
		});
		
		this.buttons.appendChild(button);	
	}
	
	/** Controlador **/
	
	appController = function()
	{
		this.confirmarSaida;
	};
	
	appController.prototype.init = function()
	{
		this.confirmarSaida = new Dialog('confirmarSaidaDlg',...