JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<h3 class='heading4'>Premier Energy Saver</h3>

<table id='tariff'>
    <thead>
        <tr class='tableHeadingLabel'>
            <th></th>
            <th>Gas</th>
            <th>Electric</th>
        </tr>
    </thead>
    <tbody>
        <tr >
            <td class='criterion'>Tariff Type</td>
                <td colspan='2'>Variable</td>
        </tr>
        
        <tr>
            <td class='criterion'>Payment Method</td>
                <td colspan='2'>Monthly Fixed Direct Debit</td>
        </tr>
        <tr>
            <td class='criterion'>Unit Rate (p/kWh)</td>
            <td>16.28p</td>
            <td>10.5p</td>
        </tr>
        <tr>
            <td class='criterion'>Standing Charge (p/Day)</td>
            <td>16.28p</td>
            <td>10.5p</td>
        </tr>
    </tbody>
</table>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto);
.tariffTable {
    
    
}

.tariffHeading

.tariffSubHeading

.tariff

table#tariff {
    font-family:"Roboto", "Helvetica Neue", "Helvetica", sans-serif;
    font-size: 1em;
     color: #555;
}
table#tariff thead,
table#tariff tbody tr{
    border-bottom: 1px solid #CCCCCC;
}

table#tariff tbody td{
    padding: 1.1em 0;
}


table#tariff tbody tr :nth-child(2) {

}
table#tariff tbody tr :nth-child(3) {

}
.tableHeadingLabel {
    font-size: 1em;
    font-weight: 400;
    text-transform: uppercase;
    color: #FA6D15;
    margin-bottom: 0;
}
.heading4 {
    display: block;
    font-family: Roboto, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    margin: 1em 0;
    color: #222;
    font-size: 1.4375em;
}
table {
    width: 100%;
    border-collapse: collapse;
}
td, th {
    padding: 6px;
    text-align: center;
    font-weight: normal;
}

.criterion {
    text-align: left;
    width: 60%;
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
 @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 70%;
    }
    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
}