JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="leftControlPanel">
    <input id="tableName" placeholder="имя таблицы">
    <input id="columns" placeholder="количество колонок">
    <input id="rows" placeholder="количество рядов">
    <input id="defaultText" placeholder="текст по умолчанию">
    <button id="generationButton">генерировать таблицу</button>
    <button id="saveButton">сохранить таблицу</button>
  </div>
  <div id="rightControlPanel">
    <table id="output"></table>
  </div>
</body>

CSS

body {
	  padding: 0;
	  margin: 0;
	  font-family: Arial;
	}
	
	#output {
	  border-collapse: collapse;
	  margin: 0 auto;
	}
	
	#leftControlPanel {
	  width: 250px;
	  height: 100%;
	  background-color: #333333;
	  position: absolute;
	}
	
	#rightControlPanel {
	  width: calc(100% - 250px);
	  overflow: scroll;
	  position: absolute;
	  right: 0;
	  height: 100%;
	}
	/*buttons*/
	
	#generationButton,
	#saveButton {
	  color: white;
	  border: none;
	  width: 230px;
	  margin: 10px;
	  height: 50px;
	  font-size: 18px;
	  border-radius: 5px;
	  transition: 0.1s;
	}
	
	#generationButton:active,
	#saveButton:active {
	  margin-top: 13px;
	  margin-bottom: 7px;
	}
	
	#generationButton {
	  background-color: #9999FF;
	}
	
	#generationButton:active {
	  background-color: #9966FF;
	}
	
	#saveButton {
	  background-color: #FFCC33;
	}
	
	#saveButton:active {
	  background-color: #CC9900;
	}
	/*buttons*/
	
	#leftControlPanel button:focus,
	#leftControlPanel input {
	  outline: none;
	}
	
	#leftControlPanel input {
	  text-align: center;
	  color: #333333;
	  border: none;
	  width: 230px;
	  margin: 10px;
	  height: 25px;
	  font-size: 18px;
	  border-radius: 5px;
	  transition: 0.2s;
	}
	
	td {
	  border: 2px black solid;
	}
	
	h1 {
	  text-align: center;
	}

JavaScript

class Table {
  constructor(name, columns, rows, defaultText) {
    this.name = name;
    this.columns = columns;
    this.rows = rows;
    this.defaultText = defaultText;

    let newH1Element = document.createElement("h1");
    newH1Element.textContent = name;
    document.getElementById("rightControlPanel").prepend(newH1Element)

    let output = document.getElementById("output");
    output.innerHTML = "";

    let newTrElement;
    output.prepend(document.createElement("colgroup"));
    for (let i = 0; i < columns; i++) {
      output.querySelector("colgroup").append('<col>');
    }
    for (let i = 0; i < rows; i++) {
      newTrElement = document.createElement('tr');
      output.append(newTrElement);
      for (let b = 0; b < columns; b++) {
        let newTd = document.createElement("td");
        newTd.textContent = defaultText;
        newTrElement.append(newTd);
      }
    }
  }
  save() {
    localStorage.setItem(this.name, document.getElementById("rightControlPanel").innerHTML)
  }
}
let generationButton = document.getElementById("generationButton");
let saveButton = document.getElementById("saveButton");
generationButton.onclick = function(e) {
  window.table = new Table(document.getElementById("tableName").value, document.getElementById("columns").value, document.getElementById("rows").value, document.getElementById("defaultText").value);
}
saveButton.onclick = function(e) {
  Table.save();
}