JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
       <td class="days selected">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
    </tr>
    <tr>
       <td class="days">&nbsp;</td>
       <td class="days selected">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
    </tr>
    <tr>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days selected colspan-11 col-1">&nbsp;</td>
       <td class="days selected colspan-11 col-2">&nbsp;</td>
       <td class="days selected colspan-11 col-3">&nbsp;</td>
       <td class="days selected colspan-11 col-4">&nbsp;</td>
       <td class="days selected colspan-11 col-5">&nbsp;</td>
       <td class="days selected colspan-11 col-6">&nbsp;</td>
       <td class="days selected colspan-11 col-7">&nbsp;</td>
       <td class="days selected colspan-11 col-8">&nbsp;</td>
       <td class="days selected colspan-11 col-9">&nbsp;</td>
       <td class="days selected colspan-11 col-10">&nbsp;</td>
       <td class="days selected colspan-11 col-11">&nbsp;</td>
    </tr>
</table>

CSS

body {
    background: #eee;
    padding: 20px;
}

table {
    border-collapse: collapse;
    border: 2px solid #fff;
}

td {
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    background: #eef;
}

td.selected {
    /* Generated on: http://www.colorzilla.com/gradient-editor/ */
    background: #228822;
    background: -moz-linear-gradient(left,  #228822 0%, #aaaa44 50%, #228822 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#228822), color-stop(50%,#aaaa44), color-stop(100%,#228822));
    background: -webkit-linear-gradient(left,  #228822 0%,#aaaa44 50%,#228822 100%);
    background: -o-linear-gradient(left,  #228822 0%,#aaaa44 50%,#228822 100%);
    background: -ms-linear-gradient(left,  #228822 0%,#aaaa44 50%,#228822 100%);
    background: linear-gradient(left,  #228822 0%,#aaaa44 50%,#228822 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#228822', endColorstr='#228822',GradientType=1 );
transform: (45deg)
}

td.colspan-11 {
    /* Width: 11 * 30px (width of <td>) + 10 * 2px (width or borders inside) = 350px */
    /* Height: doesn't really matter */
    background-size: 350px 1px;
}

td.colspan-11.col-1 {
    background-position: 0 0;
}

td.colspan-11.col-2 {
    /* 1 previous <td> (30px) and 1 previous border (2px) */
    background-position: -32px 0;
}

td.colspan-11.col-3 {
    /* 2 previous <td>s (30px) and 2 previous borders (2px) */
    background-position: -64px 0;
}

td.colspan-11.col-4 {
    /* etc. */
    background-position: -96px 0;
}

td.colspan-11.col-5 {
    background-position: -128px 0;
}

td.colspan-11.col-6 {
    background-position: -160px 0;
}

td.colspan-11.col-7 {
    background-position: -192px 0;
}

td.colspan-11.col-8 {
    background-position: -224px 0;
}

td.colspan-11.col-9 {
    background-position: -256px 0;
}

td.colspan-11.col-10 {
    background-position: -288px 0;
}

td.colspan-11.col-11 {
    background-position: -320px 0;
}