JSFiddle - React, Tailwind, and code Playground

by elezar

HTML

<table class="calendar">
    <colgroup>
        <col class="weekends" />
        <col />
        <col />
        <col />
        <col />
        <col />
        <col class="weekends" />
    </colgroup>
    <thead>
        <th>Su</th>
        <th>M</th>
        <th>T</th>
        <th>W</th>
        <th>Th</th>
        <th>F</th>
        <th>Sa</th>
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>
    </tbody>
</table>

CSS

.calendar {
    border-collapse: collapse;
    border-spacing: 0;
}

.calendar td,
.calendar th {
    border: 1px solid #bbb;
    height: 30px;
    width: 30px;
    text-align: center;
}

.calendar col.weekends {
    background-color: red;
}