JSFiddle - React, Tailwind, and code Playground

by Fuckomako

HTML

<template id="btnTemplate">
  <div class="btnWrapper">
    <button type="button"></button>
  </div>
</template>

CSS

.btnWrapper {
  padding: 15px;
  margin: 5px;
  border: 1px solid tomato;
}

button {
  margin: 10px;
  padding: 10px;
  
  background-color: tomato;
  border: 1px solid tomato;
  border-radius: 2px;
  
  font-size: 18px;
  line-height: 1;
  
  cursor: pointer;
}

button:hover {
  background-color: #ad1a00;
  border-color: #ad1a00;
  color: #fff;
  transition-duration: 0.3s;
}

JavaScript

var urls = [
	'https://api.github.com/users/o0',
  'https://api.github.com/users/zeckson',
  'https://api.github.com/users/fyvfyv'
];

var template = document.querySelector('#btnTemplate').content;
var xhr = new XMLHttpRequest();
var a = [];

function downloadData(url) {
  a.push(new XMLHttpRequest());
   indx = a.length - 1;
  a[indx].open('GET', url, true);
  a[indx].send();
  a[indx].onload = function (event) {
  	drawButton(event.target.response);
	}; 
}

var onClick = function (event) {
  event.preventDefault();
  document.body.insertAdjacentHTML('beforeEnd', '<p>' + 'ID: '+ event.currentTarget.id + '\nName: ' + event.currentTarget.dataset.name + '</p>');
}

function drawButton(xhrok, cb) {
	var data = JSON.parse(xhrok);
	var btnFragment = template.cloneNode(true);
  
  var btn = btnFragment.querySelector('button');
  btn.addEventListener('click', onClick);
  btn.textContent = data.login;
  btn.setAttribute('id', data.id);
  btn.dataset.name = data.name;
  
  document.body.appendChild(btn);
}

urls.forEach(function(url) {
	downloadData(url);  
});