JSFiddle - React, Tailwind, and code Playground

HTML

<html>
	<head>
		<meta charset = utf-8>
		<link href = "styles/style.css" rel = "stylesheet" type = "text/css">
		<title>ex_2</title>

	</head>
	<body>
	<header>
	</header>
	<div id="root"></div>

		<script src="scripts/script.js" type="text/javascript" charset="utf-8"></script>
	</body>


</html>

JavaScript

class Element {
    constructor(element, cls, id) {
        this.element = element;
        this.cls = cls;
        this.id = id;
    }
    addElement() {
        let element = document.createElement(this.element);
        element.className = this.cls;
        element.id = this.id;

        root.append(element);
        console.log(this.element);
    }
};

class Div extends Element {};
const div = new Div("div", "ClassDiv", "IDdiv");
div.addElement();

const Message = () => {
    const say = document.querySelector("#inpTXT").value;
    IDdiv.insertAdjacentHTML(`beforeend`, `<p>${say}</p>`);
};

IDdiv.insertAdjacentHTML('beforeend',
    '<input type="text" id = "inpTXT" placeholder = "input field" ></input>');
IDdiv.insertAdjacentHTML('beforeend',
    '<input type="button" id = "firstInp" value = "press me" ></input>');
firstInp.addEventListener("click", Message);

class Table extends Element {};
const table = new Div("div", "ClassDivTable", "IDdivTable");
table.addElement();

IDdivTable.insertAdjacentHTML('beforeend',
    `<table id = "dataTable">
    	<tbody>
    	<tr>
	    	<td>data</td>
	        <td>summ</td>
	        <td>age</td>
	        <td>insert</td>
	        <td>calc</td>
        </tr>
        <tr>
	    	<td>xx</td>
	        <td>tt</td>
	        <td>3</td>
	        <td>4</td>
	        <td>5</td>
        </tr><tr>
	    	<td>yy</td>
	        <td>aa</td>
	        <td>bb</td>
	        <td>dd</td>
	        <td>плпл</td>
        </tr>
        </tbody>
     </table>`);