JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<div id="table"></div>
<p>&#160;</p>Script prints out the following:
<pre class="prettyprint">
<code class="prettyprint">
&lt;div id="table">
    &lt;table>
        &lt;tr>
            &lt;td colspan="3">&lt;p>Table&lt;/p>&lt;/td>
        &lt;/tr>
        &lt;tr>
            &lt;td>&lt;p>Attempt #1&lt;/p>&lt;/td>
            &lt;td>&lt;p>John Doe&lt;/p>&lt;/td>
            &lt;td>&lt;p>508-555-1234&lt;/p>&lt;/td>
        &lt;/tr>
        &lt;tr>
            &lt;td>&lt;p>Attempt #2&lt;/p>&lt;/td>
            &lt;td>&lt;p>Jane Doe&lt;/p>&lt;/td>
            &lt;td>&lt;p>775-555-5678&lt;/p>&lt;/td>
        &lt;/tr>
        &lt;tr>
            &lt;td>&lt;p>Attempt #3&lt;/p>&lt;/td>
            &lt;td>&lt;p>Adam Doe&lt;/p>&lt;/td>
            &lt;td>&lt;p>603-555-9012&lt;/p>&lt;/td>
        &lt;/tr>
        &lt;tr>
            &lt;td>&lt;p>Attempt #4&lt;/p>&lt;/td>
            &lt;td>&lt;p>Karen Doe&lt;/p>&lt;/td>
            &lt;td>&lt;p>978-555-3456&lt;/p>&lt;/td>
        &lt;/tr>
        &lt;tr>
            &lt;td>&lt;p>Attempt #5&lt;/p>&lt;/td>
            &lt;td>&lt;p>Trish Doe&lt;/p>&lt;/td>
            &lt;td>&lt;p>603-555-7890&lt;/p>&lt;/td>
        &lt;/tr>
        &lt;tr>
            &lt;td>&lt;p>Attempt #6&lt;/p>&lt;/td>
            &lt;td>&lt;p>Company&lt;/p>&lt;/td>
            &lt;td>&lt;p>(try to reach someone)&lt;/p>&lt;/td>
        &lt;/tr>
    &lt;/table>
&lt;/div>
    </code>
</pre>

CSS

/* --------------------------
 * Global Styles
 * --------------------------
*/
 body {
    font-family:sans-serif;
}
/* --------------------------
 * Table Styles
 * --------------------------
*/
 table {
    margin: 0px;
    border-collapse: collapse;
    display: inline;
    table-layout:fixed;
}
table tr:first-child td, table tr:first-child td p {
    background-color: #00549f;
    color: #ffffff;
    font-weight: 700;
}
table tr:first-child td:first-child {
    border-top-left-radius: 8px;
}
table tr:first-child td:last-child {
    border-top-right-radius: 8px;
}
table tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}
table tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}
table td {
    text-align: center;
    border: 2px solid #00549f;
    min-width: 300px;
}
table td p {
    margin: 0;
    padding: 0;
}
table tr:nth-child(even) {
    background: #ECF0F1;
}
table tr:hover {
    background: #BDC3C7;
    color: #ffffff !important;
}
table a {
    color: inherit;
    text-decoration: none;
}
table a:hover {
    color: inherit;
}

JavaScript

//<![CDATA[ 
       //employee array
       window.onload = function () {

           var array = [];
           array[0] = {
               name: "John Doe",
               number: "508-555-1234"
           };
           array[1] = {
               name: "Jane Doe",
               number: "775-555-5678"
           };
           array[2] = {
               name: "Adam Doe",
               number: "603-555-9012"
           };
           array[3] = {
               name: "Karen Doe",
               number: "978-555-3456"
           };
           array[4] = {
               name: "Trish Doe",
               number: "603-555-7890"
           };
           array[5] = {
               name: "Company",
               number: "(try to reach someone)"
           };
           var arrayLength = array.length;
           var theTable = document.createElement("table");
           currentIndex = 0;
           lastIndex = array.length - 1;

           //write table header
           while (true) {
               tr = document.createElement("tr");

               td0 = document.createElement("td");
               td0.colSpan = 3;
               p = document.createElement("p");
               p.appendChild(document.createTextNode("Table"));
               td0.appendChild(p);
               tr.appendChild(td0);

               theTable.appendChild(tr);
               break;
           }

           //for each employee in above array, write the attemp#, their name, and their contact info
           for (var i = 0, tr, td; i < arrayLength; i++) {

               tr = document.createElement("tr");

               td1 = document.createElement("td");
               p = document.createElement("p");
               p.appendChild(document.createTextNode("Attempt #" + (array.length++-5)));
               td1.appendChild(p);
               tr.appendChild(td1);

               td2 = document.createElement("td");
               p = document.createElement("p");
              ...