JSFiddle - React, Tailwind, and code Playground

HTML

<span id="console"></span>

CSS

* {
    box-sizing: border-box;
    user-select: none;
    cursor: default;
}
#console {
    z-index: 20101010;
    position: fixed;
}
.messageCanvas {
    z-index: 100;
    height: 100%;
    width: 100%;
    position: fixed;
    background: #FFFFFF;
    overflow: auto;
    display: flex;
}
.messageCanvas .messageContainer {
    min-width: 300px;
    text-align: right;
    margin: auto;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
}
.messageCanvas .messageHeader {
    text-align: left;
    font-weight: bold;
    font-size: 1.25rem;
    padding: 0.75rem;
    color:  #666666;
}
.messageCanvas .messageBody {
    text-align: left;
    font-size: 1rem;
    padding: 1rem;
    color:  #000000;
}
.messageCanvas .messageFooter {
    background-color: #EEEEEE;
}
.messageCanvas .button {
    display: inline-block;
    margin: 1rem;
    padding: 0.75rem;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
}
.messageCanvas .cancel {
    color: #FFFFFF;
    background-color: #77B0E0;
}
.messageCanvas .cancel:hover {
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}
.messageCanvas .cancel:active {
    color: #DFDFDF;
    background-color: #672F89
}
.messageCanvas .accept {
    border: 1px solid #CCCCCC;
}
.messageCanvas .accept:hover {
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}
.messageCanvas .accept:active {
    background-color: #DDDDDD;
}

JavaScript

//Функция в глобальной видимости! Говорят, это плохо.
function showMessage(
  parameters //Оппа, совсем непонятно, что там внутри?
) {
  console.log(arguments); //Отладчик - наше всё.
  console.log(parameters.header); //Есть всегда.
  console.log(parameters.body); //Тоже.
  console.log(parameters.cancel); //Может не передаваться.
  console.log(parameters.accept); //Тоже.
  
  //Заливаем фон:
  var messageCanvas = document.createElement('div');
  messageCanvas.className = "messageCanvas";
  document.body.insertBefore(messageCanvas, document.body.firstChild);
  //Контейнер для элементов сообщения:
  var messageContainer = document.createElement('div');
  messageContainer.className = "messageContainer";
  messageCanvas.appendChild(messageContainer);
  //Заголовок:
  var messageHeader = document.createElement('div');
  messageHeader.className = "messageHeader";
  messageHeader.innerText = parameters.header;
  messageContainer.appendChild(messageHeader);
  //Основная информация:
  var messageBody = document.createElement('div');
  messageBody.className = "messageBody";
  messageBody.innerText = parameters.body;
  messageContainer.appendChild(messageBody);
  //В этой штуке сидят кнопочки:
  var messageFooter = document.createElement('div');
  messageFooter.className = "messageFooter";
  messageContainer.appendChild(messageFooter);
  //До этого все было просто.
  //Нужно добавить интерактивности:
  	//Отмена
  var messageCancel = document.createElement('div');
  messageCancel.className = "button cancel";
  
  messageCancel.onclick = function() {
    messageCanvas.remove();
  }
  messageCancel.innerText = "Просто отмена";
  
	if (
    parameters.cancel &&
    Array.isArray(parameters.cancel)
  ) {
		if (
      parameters.cancel[0] &&
    	typeof(parameters.cancel[0]) === 'string'
    ) {
    	messageCancel.innerText = parameters.cancel[0];
    }
  	if (
      parameters.cancel[1] &&
    	typeof(parameters.cancel[1]) === 'function'
    ) {
			messageCancel.onclick =...