JSFiddle - React, Tailwind, and code Playground

HTML

<form id="feedback-form" class="feedback-form">
    <textarea id="form-text" name="message" placeholder="Type some text"></textarea>
    <br>
    <input type="button" id="add-button" value="Add element" onclick="AddElement()">
  </form>

CSS

.date {
			  float: right;
			  font: 12px Verdana, sans-serif;
			  margin-top: -3px;
			  color: #383838;
			  text-align: right;
			}

			.container-text {
			  font: 16px Verdana, sans-serif;
			  font-weight: bold;
			  color: #383838;
			  margin-top: px;
			  float: left;
			  max-width: 200px;
			  max-height: 200px;
			}

			.container {
			  border-radius: 5px;
			  background-color: white;
			  padding: 20px;
			  width: 300px;
			  height: 220px;
			  float: left;
			  margin-left: 60px;
			  position: relative;
			  margin-bottom: 50px;
			  align-items: center;
			  justify-content: center;
			  box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.13), 0 14px 30px 0 rgba(0, 0, 0, 0.09);
			  transition-duration: 0.2s;
			}

			.container:hover {
			  width: 300px;
			  height: 225px;
			  margin-top: -5px;
			  transition-duration: 0.2s;
			}

			.line1 {
			  width: 330px;
			  margin-left: -16px;
			}

JavaScript

function AddElement() {
  var div = document.createElement("DIV");
  var p = document.createElement("P");
  var line = document.createElement("HR");
  var text = document.createElement("P");
  div.className = 'container';
  p.className = 'date';
  p.id = 'demo';
  line.className = 'line1';
  text.id = "text";
  text.className = "container-text";
  document.body.appendChild(div);
  div.appendChild(p);
  div.appendChild(line);
  div.appendChild(text);
  document.getElementById("text").innerHTML = document.getElementById("form-text").value;
  var d = new Date();
  d.getDay();
  document.getElementById("demo").innerHTML = d;
  document.getElementById("add-button").style.display = "none";
}