JSFiddle - React, Tailwind, and code Playground

HTML

<div id="quick_actions_container">
  <span class="label">Quick Build Actions</span>
  <ul id="quick_actions"></ul>
</div>

CSS

html {
  margin: 10px;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

div#quick_actions_container span.label {
  position: absolute;
  top: -9px;
  left: 9px;
  background: #fff;
  font-family: "Arial";
  font-size: 14px;
}

ul#quick_actions {
  display: flex;
  flex-flow: wrap;
}

ul#quick_actions li {
  margin: 5px;
}

ul#quick_actions li button {
  padding: 12px 10px;
  width: 140px;
}

div#quick_actions_container {
  border: 1px solid #aaa;
  padding: 10px;
  position: relative;
  border-radius: 5px;
}

JavaScript

const buttons = [
	{text: '1 cs', value: 'build_1_cs'},
  {text: '4 cs', value: 'build_4_cs', disabled: true},
	{text: '10 farms', value: 'build_10_farms'},
	{text: '1000000 farms', value: 'build_1000000_farms'}
];

const qs = (tag) => document.querySelector(tag);
const $quick_actions = qs('#quick_actions');

$quick_actions.append(
	...buttons.map((button) => {
  	const $li = document.createElement('li');
  	const $btn = document.createElement('button');
    $btn.value = button.value;
    $btn.textContent = button.text;
    $btn.disabled = button.disabled;
    $li.append($btn);
    return $li;
  })
);