JSFiddle - React, Tailwind, and code Playground

by Miguel Roman

HTML

<button id="add-button" type="button">Add</button>

<div id="container">

</div>

CSS

body {
  background: #fff;
}

button[type=button] {
  margin-bottom: 5px;
}

#container {
  width: 100%;
  min-height: 82px;
  background-color: #e3e3e3;
  display: block;
  border: 1px solid black;
  padding: 0 0 2px 0;
  line-height: 0;
}

.element {
  width: 80px;
  height: 80px;
  display: inline-block;
  background-color: #e412f2;
  margin: 2px 0 0 2px;
}

JavaScript

var container = document.getElementById("container");
var btn = document.getElementById("add-button");

btn.addEventListener("click", onAddButtonClick);

function onAddButtonClick(e) {
	e.preventDefault();
  addNewDiv();
}

function addNewDiv() {
	var div = document.createElement('div');
  div.className = 'element';
  container.append(div);
}