JSFiddle - React, Tailwind, and code Playground

by Martin Sjåstad

HTML

<div id="unit_details">
    <div class="information_box" id="lecture">
        <table>
            <thead>
                <tr>
                    <th colspan="2"><strong>LECTURE</strong></th>
                </tr>
            </thead>
            <tr>
                <td><strong>LECTURER</strong></td>
                <td>John Gerrand <a href="#">93%</a></td>
            </tr>
            <tr>
                <td><strong>WHEN</strong></td>
                <td>1-2pm Tuesday</td>
            </tr>
            <tr>
                <td></td>
                <td>3-4pm Thursday</td>
            </tr>
            <tr>
                <td><strong>WHERE</strong></td>
                <td>STH 1, BLD 64 <a href="#">Map</a></td>
            </tr>
        </table>
    </div>
    <div class="information_box" id="tutorial">
        <table>
            <thead>
                <tr>
                    <th colspan="2">TUTORIAL</th>
                </tr>
            </thead>
            <tr>
                <td><strong>TUTOR</strong></td>
                <td>Raj Varan <a href="#">88%</a></td>
            </tr>
            <tr>
                <td><strong>WHEN</strong></td>
                <td>8-9am Wednesday</td>
            </tr>
            <tr>
                <td><strong>WHERE</strong></td>
                <td>W364, Bld 11</td>
            </tr>
        </table>
    </div>
    <div class="information_box" id="rating">
        <table>
            <thead>
                <tr>
                    <th colspan="2">RATING 89% <a href="#">Hide</a></th>
                </tr>
            </thead>
            <tr>
                <td><strong>EASE</strong></td>
                <td class="rating_num">4.3</td>
            </tr>
            <tr>
                <td><strong>INTERESTING</strong></td>
                <td class="rating_num">3.9</td>
            </tr>
            <tr>
                <td><strong>BENEFICIAL</strong></td>
                <td class="rating_num">3.0</td>
           ...

CSS

#unit_details
{
    border: 1px solid #c8c8c8;
    padding: 0;
    margin: 0;
}

#unit_details #lecture table,
#unit_details #tutorial table,
#unit_details #rating table
{
    width: 100%;
    margin: 0;
    padding: 0;
}

.information_box thead tr
{
    background-color: #f5f5f5;
    border-bottom: 1px solid #dadada;
    margin: 0;
    padding: 0;

}

.information_box
{
    /*width: 203px;*/
    float: left;
    border-right: 1px solid #c8c8c8;
}

.information_box#rating
{
    border-right: none;
}

#rating td.rating_num
{
    text-align: right;
}

.clear {
    clear: both;
}