JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css">
<div style="max-width: 400px; max-height: 400px; overflow: auto;">
    <table>
        <thead>
            <tr>
                <th></th>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
                <th>6</th>
                <th>7</th>
                <th>8</th>
                <th>9</th>
                <th>10</th>
                <th>11</th>
                <th>12</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="headcol">1</td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
            </tr>
                    <tr>
                <td class="headcol">2</td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
                <td><i class="fa fa-square-o fa-4x"></i></td>
                <td><i class="fa fa-square-o...