JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
   <a href="#" class="arrow" id="prev">&#9668;</a>
   <a href="#" class="arrow" id="next">&#9658;</a>
    <table></table>
</div>

CSS

#wrapper {
      position: relative;
      top: 100px;
      left:25px;
      width: 500px;
      height: 338px;
      margin: 0 auto
}
.arrow {
     position: absolute;
     top: 6.5px;
     text-decoration: none;
     font-size: 21px;
     color: #000000;
     cursor: pointer;
 }
        
.arrow:active {
     color: #221f1f;
 }
 #prev {
     left: 25px;
 }
 #next {
     left: 455px;
 }
 table#calendar {
     border-radius: 3px;
     background: #000;
     font-family: monospace;
     font-size: 1.5em;
     text-align: center;
     color: hsl(0, 0%, 81%);
 }
 #calendar caption {
     height:35px;
     line-height:37px;
     font-style: italic;
     font-size: 17px;
     color: hsl(0, 0%, 88%);
     background: rgba(90, 55, 194, 0.74);
 }
 #calendar th {
     width: 50px;
     height: 25px;
     padding: 10px;
     background: rgba(23, 245, 41, 0.82);
     cursor: default;
 }
        #calendar th:nth-child(7), #calendar th:nth-child(6) {
            background: #f52b2b;
        }
        #calendar td.prev-month, #calendar td.next-month {
            background:rgb(38, 38, 38);
            color:#224dc4;
        }
        #calendar td {
            width: 50px;
            height: 50px;
            border: 1px solid rgba(103, 103, 103, 0.39);
            font-weight: 700;
            cursor: default;
        }
        #calendar td:hover:not(.today) {
            color: #cb5618;
        }
        #calendar td:active:not(.today) {
            border: 1px solid #ffa934;
        }
        #calendar td:nth-child(6):not(.next-month):not(.prev-month), #calendar td:nth-child(7):not(.next-month):not(.prev-month) {
            color: #575757;
        }
        #calendar td.today span {
            display: block;
            width: 30px;
            height: 30px;
            margin-left: 20px;
            line-height: 30px;
            border-radius: 100%;
            background: #07a826;
            color: #000;
        }
        
        #calendar td.today span:hover {
  ...

JavaScript

(function () {
    var tblF, prev, next, wrap = document.getElementById("wrapper"),
        table;

    function createCalendar(id, year, month, cal) {
        function getDay(d) {
            var day = d.getDay();
            if (day === 0) day = 7;
            return day - 1;
        }
        var wrap = document.getElementById(id);
        table = document.getElementsByTagName("table")[0], date = new Date(year, month - 1);
        table.id = cal;
        var monthInfo = {
            0: "Январь",
            1: "Февраль",
            2: "Март",
            3: "Апрель",
            4: "Май",
            5: "Июнь",
            6: "Июль",
            7: "Август",
            8: "Сентябрь",
            9: "Октябрь",
            10: "Ноябрь",
            11: "Декабрь"
        };
        var tbl = '<tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th></tr><tr>';
        var Month = date.getMonth();
        
        var corD = new Date(year,month-1,0),count = -1,res = [];
        
        for(var i = 1; i<corD.getDate()+1; i++) {
            res.push(i)
        }
        res = res.reverse()
        for (var i = 0; i<getDay(date); i++) {
            count++
            tbl += '<td class="prev-month">'+res[count]+'</td>';
        }
        

        while (Month === date.getMonth()) {
            tbl += "<td>" + date.getDate() + "</td>";
            if (getDay(date) === 6) {
                tbl += "</tr><tr>";
            }

            date.setDate(date.getDate() + 1);
        }
        var dateOfnextMonth = new Date(year, month),cnt = -1;
        if (getDay(date) !== 0) {
            for (var i = getDay(date); i < 7; i++) {
                cnt++
                var incr = dateOfnextMonth.getDate()+cnt;
                tbl += '<td class="next-month">'+incr +'</td>';
            }
        }
        table.innerHTML = tbl;
        wrap.appendChild(table);
        
        var prevMon = document.querySelectorAll(".prev-month"),res2 = [];
      ...