JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<table class="flat__grid">
    <tr>
        <td>16</td>
        <td>17</td>
        <td>18</td>
    </tr>
    <tr>
        <td>11<span>2к</span></td>
        <td>12<span>3к</span></td>
        <td>13<span>4к</span></td>
        <td>14<span>2к</span></td>
        <td>15<span>3к</span></td>
    </tr>
    <tr>
        <td class="nic">6</td>
        <td class="sales">7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
</table>

<h3>0</h3>

CSS

* { margin: 0; padding: 0; }
body { margin: 20px; }
.flat__grid {
    border-collapse: collapse;
    border-spacing: 0px;
}

.flat__grid td {
    position: relative;
    z-index: 1;
    width: 35px; height: 35px;
    line-height: 35px; text-align: center;
    font-size: 14px;
    border: 1px solid #555;
    cursor: pointer;
}

.flat__grid td:hover { z-index: 5; background: #ccc; }

.flat__grid td:hover:after{
    display: block;
    border-radius: 4px;
    content: '';
    position: absolute;
    top: -20%; left: -20%;
    width: 130%; height: 130%;
    border: 1px solid #000;
    background: #ccc;
    z-index: -1;
}

.sales {
    background: green;
}

.sales:hover:after {
    
}


span {
    position: absolute;
    right: 1px; top: -11px;
    font-size: 10px;
}

JavaScript

$('td').click(function(){
    var lx = $(this).text();
    $('h3').text(lx);
});