JSFiddle - React, Tailwind, and code Playground

HTML

<table class="calendar">
    <tr>
        <th>ПН</th>
        <th>ВТ</th>
        <th>СР</th>
        <th>Чт</th>
        <th>ПТ</th>
        <th>СБ</th>
        <th>ВС</th>
    </tr>
    <tr>
        <td>
            <div>
                <div class="note1" id="2014_02_01_01"></div>
                <div class="note2" id="2014_02_01_02"></div>
                <div class="note3" id="2014_02_01_03"></div>
                <div class="note4" id="2014_02_01_04"></div>
            </div>
            <span>
                <span>01</span>
                <span class="vh"></span>
            </span>
        </td>
        <td>
            <span>
                <span>02</span>
                <span class="vh"></span>
            </span>
        </td>
        <td>
            <span>
                <span>03</span>
                <span class="vh"></span>
            </span>
        </td>
        <td>
            <span>
                <span>04</span>
                <span class="vh"></span>
            </span>
        </td>
        <td>
            <span>
                <span>05</span>
                <span class="vh"></span>
            </span>
        </td>
        <td>
            <span>
                <span>06</span>
                <span class="vh"></span>
            </span>
        </td>
        <td>
            <span>
                <span>07</span>
                <span class="vh"></span>
            </span>
        </td>
    </tr>
    <tr>
        <td>
            <span>
                <span>08</span>
                <span class="vh"></span>
            </span>
        </td>
        <td>
            <span>
                <span>09</span>
                <span class="vh"></span>
            </span>
        </td>
        <td>
            <div>
                <div class="note1" id="2014_02_10_01"></div>
                <div class="note2" id="2014_02_10_02"></div>
                <div class="note3" id="2014_02_10_03"></div>
            </div>
            <span>
 ...

CSS

th{
    
}
td{
    width:40px;
    height:40px;
    border:1px solid #bbbbbb;
    text-align:center;
    vertical-align:top;    
}
td>div{
    position:absolute;
    width:40px;
    height:40px;
    opacity:0.5;
}
td>span{
    display:inline-block;
    width:40px;
    height:40px;
}
td>span>span{
    display:inline-block;
    vertical-align:middle;
}
td>span>span.vh{
    display:inline-block;
    vertical-align:middle;
    height:100%;
    width:0px;
}
.note1{
    position:absolute;
    left:0px;
    top:0px;
    width:40px;
    height:40px;
    background:rgb(255,0,0);
    cursor:pointer;
}
.note2{
    position:absolute;
    left:20px;
    top:0px;
    width:20px;
    height:40px;
    background:rgb(0,255,0);
    cursor:pointer;
}
.note3{
    position:absolute;
    left:0px;
    top:20px;
    width:40px;
    height:20px;
    background:rgb(0,0,255);
    cursor:pointer;
}
.note4{
    position:absolute;
    left:20px;
    top:20px;
    width:20px;
    height:20px;
    background:rgb(0,255,255);
    cursor:pointer;
}