JSFiddle - React, Tailwind, and code Playground

by Francis Trujillo

HTML

<div id="showTable1Div" class="showTable1Class">
    <div class="clear-floats">
        <div class="float-left">Kill the wabbit</div>
        <div class="float-right">Sufferin succotash</div>
    </div>
    <div class="clear-floats">
        <table id="showTable1" class="sqlresults single-select">
            <thead>
                <tr>
                    <th>id</th>
                    <th>user_name</th>
                    <th>full_name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>60</td>
                    <td>BBUNNY</td>
                    <td>BUGS BUNNY</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="clear-floats">
        <div class="float-left">Warner Bros</div>
        <div class="float-right">That's all folks!</div>
    </div>
</div>
<div class="clear-floats">
    <div>Some other content.</div>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
}

html, body {
    height: 100%;
    width: 100%;
    font-family:"Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
    font-size: 8pt;
}

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div.clear-floats {
    clear: both;
}
div.float-left {
    background-color: #F78768;
    float: left;
}
div.float-right {
    background-color: #7DEAF0;
    float: right;
}

table > tbody > tr.selected-row {
    background-color: #fadd6b;
}
table.sqlresults {
    /* keeps td and th from doubling later on */
    border-collapse: collapse;
    border: 1px solid black;
    width: 100%;
}
table.sqlresults tbody td {
    border: 1px solid black;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
}
table.sqlresults thead th {
    border: 1px solid black;
    height: 20px;
    text-align: center;
    /*background-color: #ffeeaf;*/
    background-color: #fcac73;
    padding-left: 10px;
    padding-right: 10px;
}