JSFiddle - React, Tailwind, and code Playground

HTML

<main>
    <div class="adminr1">
        <section class="adminc1">
            <table class="adminResults">
                <thead>
                    <td>cell</td>
                    <td>cell</td>
                </thead>
                <tr>
                    <td>cell</td>
                    <td>cell</td>
                </tr>
            </table>
        </section>
    </div>
</main>

CSS

* {
     margin: 0;
     padding: 0;
     font-size: small;
     font-family: Roboto;
     vertical-align: middle;
     text-decoration: none;
 }
 main {
     font-size: 0;
     line-height: 1.5;
     text-align: center;
     margin: 0 auto;
     width: 86%;
     min-width: 1000px;
 }
 section {
     border: 1px solid #BBB;
     background: #FFF;
     border-radius: 7px;
     display: inline-block;
     overflow: hidden;
 }
 .adminr1 {
     display: inline-block;
     width: 66%;
     height: 700px;
     margin-right: 5px;
     font-size: 0;
     margin-bottom: 10px;
 }
 .adminc1 {
     width: 100%;
     height: 100%;
     font-size: 0;
 }
 /*Table Styles:*/
 .adminResults {
     width: 100%;
     border: 1px solid #000;
    border-spacing: 0px;;
    border-collapse: seperate;
 }
 .adminResults thead {
     border: 1px solid #000;
 }
 .adminResults tr td {
     border-left: 1px solid #000;
     border-right: 1px solid #000;
 }