JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <table></table>
</div>
<script>
    ! function() {
        var tblF, prev, next, wrap = document.getElementById("wrapper");

        function createCalendar(id, year, month, cal) {
            try {
                if (year > Number.MAX_SAFE_INTEGER || month > 12) {
                    throw new Error("Max year or month")
                } else if (year <= 0 || month <= 0) {
                    throw new Error("Min year or month")
                }

                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();
                for (var i = 0; i < getDay(date); i++) {
                    tbl += "<td style=\"background:rgb(27, 27, 27);\"></td>"
                };

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

                    date.setDate(date.getDate() + 1)
                }

                if (getDay(date) !== 0) {
                    for...

CSS

#wrapper {
         position: relative;
         top: 150px;
         width: 500px;
         height: 338px;
         margin: 0 auto;
     }
     .arrow {
         position: absolute;
         top: -1.5px;
         text-decoration: none;
         font-size: 31px;
         color: #000000;
         cursor: pointer;
     }
     #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 {
         position: relative;
         height:35px;
         line-height:37px;
         font-style: italic;
         font-size: 17px;
         color: hsl(0, 0%, 88%);
         background: rgba(141, 141, 141, 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 {
         width: 50px;
         height: 50px;
         border: 1px solid rgba(103, 103, 103, 0.39);
         font-weight: 700;
         cursor: default;
     }

JavaScript

/*!function(){
         var tblF,prev,next,wrap = document.getElementById("wrapper");
    function createCalendar(id,year,month,cal) {
       try {
           if (year > Number.MAX_SAFE_INTEGER  || month > 12) {
               throw new Error("Max year or month")
           } else if( year <= 0 || month <= 0) {
               throw new Error("Min year or month")
           } 
            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();
        for (var i = 0; i<getDay(date); i++) {
            tbl += "<td style=\"background:rgb(27, 27, 27);\"></td>"
        };
        
        while(Month === date.getMonth()) {
            tbl += "<td>"+date.getDate()+"</td>"
            if (getDay(date) === 6) {
                tbl += "</tr><tr>"
            }
            
            date.setDate(date.getDate()+1)
        }
        
        if (getDay(date) !== 0) {
            for (var i = getDay(date); i<7; i++) {
                tbl += "<td style=\"background:rgb(19, 19, 19);\"></td>"
            }
        };
        table.innerHTML = tbl
        wrap.appendChild(table);
        
         tblF = document.getElementById(cal),capt = document.createElement("caption"),search = tblF.getElementsByTagName("td");
           
           var arrow = document.createElement("a");
          ...