JSFiddle - React, Tailwind, and code Playground

by Sparrow Squire

HTML

<table>
    <thead>
        <caption>Airport - XX Nights - XXX 20XX</caption>
        <tr>
            <th data-label=" &ndash; Prices from &pound;XX">Mon</th>
            <th data-label=" &ndash; Prices from &pound;XX">Tues</th>
            <th data-label=" &ndash; Prices from &pound;XX">Weds</th>
            <th data-label=" &ndash; Prices from &pound;XX">Thurs</th>
            <th data-label=" &ndash; Prices from &pound;XX">Fri</th>
            <th data-label=" &ndash; Prices from &pound;XX">Sat</th>
            <th data-label=" &ndash; Prices from &pound;XX">Sun</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <span data-label="Mon " class="date">XX XXX</span>
                <span class="price">&pound;XXX</span>
            </td>
            <td>
                <span data-label="Tues " class="date">XX XXX</span>
                <span class="price">&pound;XXX</span>
            </td>
            <td>
                <span data-label="Weds " class="date">XX XXX</span>
                <span class="price">&pound;XXX</span>
            </td>
           <td>
                <span data-label="Thurs " class="date">XX XXX</span>
                <span class="price">&pound;XXX</span>
            </td>
            <td>
                <span data-label="Fri " class="date">XX XXX</span>
                <span class="price">&pound;XXX</span>
            </td>
            <td>
                <span data-label="Sat " class="date">XX XXX</span>
                <span class="price">&pound;XXX</span>
            </td>
            <td>
                <span data-label="Sun " class="date">XX XXX</span>
                <span class="price">&pound;XXX</span>
            </td>
        </tr>
        <tr>
            <td>
                <span data-label="Mon " class="date">XX XXX</span>
                <span class="price">&pound;XXX</span>
            </td>
            <td>
                <span data-label="Tues " class="date">XX XXX</span>
    ...

CSS

/* 
Generic Styling, for Desktops/Laptops 
*/
 table {
    width: 100%;
    text-align:center;
    border-collapse: seperate;
    border-spacing: 0.5rem;
}

caption {
    font-size:18px;
    font-weight:bold;
    color:#044386;
    background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(4,67,134,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(4,67,134,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(4,67,134,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(4,67,134,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(4,67,134,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(4,67,134,1) 100%); /* W3C */
filter: progid:DXImage0.5ransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#044386',GradientType=0 ); /* IE6-9 */
    margin: 0 0.5% -52px 0.5%;
    padding-bottom: 53px;
    position: relative;
    z-index: -1
}

tr {
    background: transparent
}

th, td {
    border-radius:5px;
    padding: 5px;
    width: 14.256%;
    border: 3px solid #DEE5EA;
    vertical-align:middle;
}

th {
    color: #fff;
    font-weight: bold;
    background:#044386;
    border: 3px solid #7497BA;
    -webkit-box-shadow: inset -5px 5px 0px 0px rgba(0,19,7,1) inset -5px 5px 0px 0px rgba(0,19,7,1);
       -moz-box-shadow: inset -5px 5px 0px 0px rgba(0,19,7,1) inset -5px 5px 0px 0px rgba(0,19,7,1);
       -moz-box-shadow: inset -5px 5px 0px 0px rgba(0,19,7,1) inset -5px 5px 0px 0px rgba(0,19,7,1);
        -ms-box-shadow: inset -5px 5px 0px 0px rgba(0,19,7,1) inset -5px 5px 0px 0px rgba(0,19,7,1);
         -o-box-shadow: inset -5px 5px 0px 0px rgba(0,19,7,1) inset -5px 5px 0px 0px rgba(0,19,7,1);
            box-shadow: inset -5px 5px 0px 0px...