JSFiddle - React, Tailwind, and code Playground

HTML

<div class="QBU-Table QBU--Cols"></div>

CSS

.QBU-Table {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 3em 0;
  padding: 0;
}

.QBU-Cell {
  box-sizing: border-box;
  flex-grow: 1;
  width: 100%;
  padding: 0.8em 1.2em;
  overflow: hidden;
  list-style: none;
  border: solid 3px white;
  background: fade(slategrey,20%);
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.QBU--Cols > .QBU-Cell {
  width: 20%;
}

body {margin-top: 100px}

JavaScript

var value = "100 Ethers";
  var expiry = "12/31/2017";
  var name = "Dan Diebolt";
  var number = "133t";
  var issued = "4/11/2017";
  
  var cellContents = `<div style="text-align:center">
  <h3>Voucher - ${value}</h3>
  <h3>Expirses ${expiry}</h3>
  <h3>Member ${name} #: ${number}</h3>
  <h3>Issued: ${issued}</h3>
  </div>
  `;

var markup = "";
 for (let i=0; i< 25; i++) {
   markup += `<div class="QBU-Cell">${cellContents}</div>`;
 }
 $(".QBU-Table").append(markup);