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 () {
           
           function getSorted(arr, sortArr) {
               var result = [];
               for(var i=0; i<sortArr.length; i++) {
                   result[i] = arr[sortArr[i]];
               }
               return result;
           }
           
           var array = [],
               sortArr = [0,6,4,7,9,1],
               sortedArr;
           
           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)"};
           array[6] = {name: "Tom Doe",number: "101-555-7890"};
           array[7] = {name: "Kim Doe",number: "102-555-7890"};
           array[8] = {name: "Logan Doe",number: "103-555-7890"};
           array[9] = {name: "Bill Doe",number: "104-555-7890"};
           array[10] = {name: "Bob Doe",number: "105-555-7890"};
           
           sortedArr = getSorted(array, sortArr);
           
           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 < sortArr.length; i++) {

         ...