JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <div class="row">

        <div id="table1Div" class="col-md-4">
        <h2 class="sub-header">Test Tab 1</h2>
            <div class="table-responsive">
                <table id="table1" class="table table-striped">
                    <tbody>
                        <tr>
                            <td class="col-md-1">Content 1</td>
                            <td class="col-md-2">Content 1</td>
                            <td class="col-md-3">Content 1</td>
                        </tr>
                        <tr>
                            <td class="col-md-1">Content 2</td>
                            <td class="col-md-2">Content 2</td>
                            <td class="col-md-3">Content 2</td>
                        </tr>
                         <tr>
                            <td class="col-md-1">Content 3</td>
                            <td class="col-md-2">Content 3</td>
                            <td class="col-md-3">Content 3</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="col-md-4">
        <h2 class="sub-header">Test Tab 2</h2>
            <div class="table-responsive">
                <table class="table table-striped">
                    <tbody>
                        <tr>
                            <td class="col-md-1">Content 4</td>
                            <td class="col-md-2">Content 4</td>
                            <td class="col-md-3">Content 4</td>
                     ...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

var testList = ["TestContent1", "TestContent2", "TestContent3", "TestContent4"];

    function drawTable1() {
        // get the reference for the body
        var table1 = document.getElementById('table1Div');
 
        // get reference for <table> element
        var tbl = document.getElementById("table1");
 
        // creating rows
        for (var r = 0; r < testList.length; r++) {
            var row = document.createElement("tr");
	     
	     // create cells in row
             for (var c = 0; c < 3; c++) {
                var cell = document.createElement("td");
                var cellText = document.createElement('span');
                cellText.innerText = testList[r];
                cell.appendChild(cellText);
                row.appendChild(cell);
            }           
            
	tbl.appendChild(row); // add the row to the end of the table body
        }
    
     table1.appendChild(tbl); // appends <table> into <div>
}

drawTable1();