JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outerPanel"></div>

CSS

.outerPanel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.btn {
  width: 20%;
  height: 40px;
  border: 2px solid red;
  text-align: center;
  vertical-align: center;
  cursor: pointer;
}

.btn:hover {
  background: black;
  color: white;
}

JavaScript

var data = [
	{name: "Date", value: "12/31/2018", type: "visible"},
  {name: "Car", value: "Ford", type: "visible"},
  {name: "Country", value: "Russia", type: "visible"},
  {name: "Age", value: "20", type: "visible"},
];

var outer = $(".outerPanel");

var createBtns = () => {
	for (var i = 0; i < data.length; i++) {
    var btn = $('<div class="btn"></div>');
    var name = data[i].name;
    var value = data[i].value;

    btn.html(name + ": " + value);
    btn.click(() => btnClick());
    outer.append(btn);
  }
}

var btnClick = () => {
	alert("test");
}

createBtns();