JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<form method="post" action="#">
    <table border="1" bordercolor="#ccc" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>День недели</td>
                <td>Вт</td>
                <td>Ср</td>
                <td>Чт</td>
                <td>Пт</td>
                <td id="weekend">Сб</td>
                <td id="weekend">Вс</td>
                <td>Пн</td>
                <td>Вт</td>
                <td>Ср</td>
                <td>Чт</td>
                <td>Пт</td>
                <td id="weekend">Сб</td>
                <td id="weekend">Вс</td>
                <td>Пн</td>
                <td>Вт</td>
                <td>Ср</td>
                <td>Чт</td>
                <td>Пт</td>
                <td id="weekend">Сб</td>
                <td id="weekend">Вс</td>
                <td>Пн</td>
                <td>Вт</td>
                <td>Ср</td>
                <td>Чт</td>
                <td>Пт</td>
                <td id="weekend">Сб</td>
                <td id="weekend">Вс</td>
                <td>Пн</td>
                <td>Вт</td>
                <td>Ср</td>
            </tr>
            <tr>
                <td>число</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
                <td>15</td>
                <td>16</td>
                <td>17</td>
                <td>18</td>
                <td>19</td>
                <td>20</td>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
                <td>25</td>
                <td>26</td>
                <td>27</td>
                <td>28</td>
                <td>29</td>
        ...

CSS

* {
     padding:0;
     margin:0;
     color:#666;
     font-family: Calibri;
 }
 body {
     width:100%;
 }
 td {
     font-size:12px;
     height:30px;
     position:relative;
     width:60px;
 }
 table {
     width:100%;
     border-collapse: collapse;
     border-spacing: 0;
 }
 tr {
     text-align: center;
 }
 input {
     border:none;
     width:100%;
     height:100%;
     text-align: center;
 }
 .placer textarea {
     border:1px solid #ccc;
     border-width:0 1px 1px 1px;
     resize:none;
     z-index:3000;
     width: 150px;
     height: 60px;
 }
 #weekend {
     background: red;
     color:white;
 }
 #rem {
     position:absolute;
     width:150px;
     height:30px;
     background:#999;
     z-index:1000;
 }
 .button {
     position:relative;
     width:100px;
     height:30px;
     line-height: 30px;
 }
 .note {
     text-align:left;
     padding:4px;
     text-indent:5px;
     float:left;
 }
 .td_note {
     z-index:50;
 }
 .close {
     cursor : pointer;
     color:#eee;
     float:right;
     clear:both;
     padding:2px 5px;
     background:#999;
 }
 .placer {
     position:absolute;
     left:-1px;
     z-index:10;
     display:none;
     top:102%;
 }
 .dummy {
     position:relative;
     height:100%;
     width:100%;
 }
 .red {
     background:red!Important;
 }

JavaScript

$('.reason').on('keyup',function(){
    var dmn = $(this).val();
    dmn = $(this).val() > 8 ? $(this).val('') : $(this).val();
  
});



$('.dummy').click(function () {
    $('.placer').hide();
    $(this).next('span').show().siblings('.close').show();
    checkCont($('textarea'));
});


$('.close').on('click', function () {
    $('.placer').fadeOut();
    checkCont($('textarea'));
});

checkCont($('textarea'));

function checkCont($some) {
    $some.each(function () {
        if ($(this).val() !== '') {
            $(this).closest('td').children('div').css({
                backgroundColor: '#ff7f7f'
            });
        } else {
        $(this).closest('td').children('div').css({
                backgroundColor: 'none'
            });
        }
    });
}