JSFiddle - React, Tailwind, and code Playground

by SHELDON PASCIAK

HTML

<div id="email-template">
  <p>
    <strong>failed to Log into your  account!</strong>
  </p>
</div>

CSS

table {
  font-family: Roboto,
    serif;
  font-size: 16px;
  color: #333;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid black;
  background-color: white;
  margin-bottom: 1rem;
  color: #212529;
}

table thead tr th {
  margin: 0;
  padding: 0.10rem 0.20rem;
  text-align: left;
  color: white;
  background-color: #2c2f33;
}

table tbody tr {
  background-color: #b6d9ee;
}

table tbody td {
  padding: 0.10rem 0.20rem;
  margin: 0;
}

JavaScript

const humanize = (str) => {
  if (typeof str !== "string" || str === null || str === undefined || str.length === 0) return str;
  const dateFields = ['download_expires_at', 'last_downloaded_timestamp', 'createdAt', 'updatedAt'];
  let i, frags = /[_]/g.test(str.toString().trim()) ? str.toString().trim().split('_') : (/[ ]/g.test(str.toString().trim()) ? str.toString().trim().split(' ') : [str.toString().trim()]);

  for (i = 0; i < frags.length; i++) {
    frags[i] = frags[i].charAt(0).toUpperCase() + (dateFields.includes(str) ? frags[i].slice(1) : frags[i].slice(1).toLowerCase());
  }

  return frags.join(' ');
}

const Array2Table = (arr, generateHtml = true) => {
  let Table = [];
  let top_row = [];
  let rows = [];

  for (let i = 0; i < arr.length; i++) {
    let cells = [];

    for (let property in arr[i]) {
      if (top_row.length < Object.keys(arr[i]).length) {
        if (generateHtml) {
          top_row.push(`<th scope="col">${humanize(property)}</th>`);
        } else {
          top_row.push(property);
        }
      }
      if (arr[i][property] === null) {
        if (generateHtml) {
          cells.push(`<td>${null}</td>`);
        } else {
          cells.push(null);
        }
      } else {
        if (generateHtml) {
          cells.push(`<td>${arr[i][property]}</td>`);
        } else {
          cells.push(arr[i][property]);
        }
      }
    }

    if (generateHtml) {
      rows.push(`<tr>${cells.join("")}</tr>`);
    } else {
      rows.push(cells);
    }
  }

  if (generateHtml) {
    Table.push(`<table>`);
    Table.push(`<thead>${top_row.join("")}</thead>`);
    Table.push(`<tbody>${rows.join("")}<tbody>`);
    Table.push("</table>");
    return Table.join("");
  }

  return {
    top_row,
    rows
  };
}


let strike_name = "bad".split("_").join(" "); 
let details = "Page Title: Log In to Online Services. Must log back into BSO! (We Cannot Match The Information That You Provided)"; 
let last_login_result = "Page Title: Log In to...