JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    Some Text Goes Here
</p>
<div class="wrapper">
    <div class="updateProgress">
        Loading...
    </div>
<table class="grid">
    <tr>
        <th>Heading 1</th><th>Heading 2</th><th>Heading 3</th><th>Heading 4</th><th>Heading 6</th><th>Heading 7</th><th>Head</th>
    </tr>
    <tr>
        <td>Data 1</td><td>Data 1</td><td>More data here</td><td>Data 1</td><td>Data 1</td><td>Data 1</td><td></td>
    </tr>
    <tr>
        <td>Data 1</td><td>Data 1</td><td>More data here</td><td>Data 1</td><td>Data 1</td><td>Data 1</td><td>More data here</td>
    </tr>
    <tr>
        <td>Data 1</td><td>Data 1</td><td>More data here</td><td>Data 1</td><td>Data 1</td><td>Data 1</td><td>More data here</td>
    </tr>
    <tr>
        <td>Putting some more data out here </td><td>Data 1</td><td>More data here</td><td>Data 1</td><td>Data 1</td><td>Data 1</td><td>More data here</td>
    </tr>
    <tr>
        <td>Data 1</td><td>Data 1</td><td>More data here</td><td>Data 1</td><td>Data 1</td><td>Data 1</td><td>More data here</td>
    </tr>
    <tr>
        <td>Data 1</td><td>Data 1</td><td>More data here</td><td>Data 1</td><td>Data 1</td><td>Data 1</td><td>More data here</td>
    </tr>
    <tr>
        <td>Data 1</td><td>Data 1</td><td>More data here</td><td>Data 1</td><td>Data 1</td><td>Data 1</td><td>More data here</td>
    </tr>
    <tr>
        <td>Data 1</td><td>Data 1</td><td>More data here</td><td>Data 1</td><td>Data 1</td><td>Data 1</td><td>More data here</td>
    </tr>
    
</table>
</div>
<p>
    More here
</p>

CSS

p
{
    margin: 0.5em;
}
.wrapper
{
    position: relative;
}
.updateProgress
{
    position:absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-right: -20px;
    width: 100px;
    height: 40px;
    background-color: #242460;
    border: solid 1px red;
    color:white;
    text-align: center;
}
.grid th
{
    border: solid 1px black;
    background-color: lightblue;
}
.grid td
{
    border: solid 1px black;
}