JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ui-calendar" data-name="cal1"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. tur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut quat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fu giat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
<div class="ui-calendar" data-name="cal2"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

CSS

.ui-calendar{ position: relative; }

.ui-calendar > input{
	font-size: 16px;
	width: 247px;
	padding: 5px;
}

.ui-calendar-show{ display: block; }
.ui-calendar-hide{ display: none; }

.ui-calendar-left, .ui-calendar-right{
	display: inline-block;
	width: 65px;
	color: red;
	text-align: center;
	cursor: pointer;
}

.ui-calendar-center{
	width: 115px;
	display: inline-block;
	text-align: center;
}

.ui-calendar-today{ color: red; }

.ui-calendar-dropdown{
	border: 1px solid #bbbbbb;
	padding-top: 5px;
	width: 245px;
	position: absolute;
	background: white;
	box-shadow: 0px 0px 8px #c0c0c0;
	z-index: 9;
}

.ui-calendar-heading{
	display: inline-block;
	width: 35px;
	height: 25px;
	padding-top: 10px;
	text-align: center;
	margin: 0;
	border-bottom: 1px solid #eaeaea;
	color: #cccccc
}

.ui-calendar-day{
	display: inline-block;
	cursor: pointer;
	width: 35px;
	height: 25px;
	padding-top: 10px;
	text-align: center;
	margin: 0;
	border-radius: 25px;
}

.ui-calendar-day:hover{
	color: #fff;
	background: red;
}

.ui-calendar-clear{ clear: both; }
.ui-calendar-light{ color: #e2e2e2; }

JavaScript

(function() {
    var longName = ['January', 'February', 'March', 'April', 'May', 'June', 'July',
        'August', 'September', 'October', 'November', 'December'
    ];
    var shortName = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

    var createAndAddElement = function(el, className, text, appendTo) {
        var el = document.createElement(el);
        if (className.length > 0)
            el.className = className;

        if (text.length > 0) {
            text = document.createTextNode(text);
            el.appendChild(text);
        }

        appendTo.appendChild(el);
    };

    var loadMonth = function(year, month, cal) {
        var
            month = month - 1, //since js dates are 0-11
            t = new Date(), //today
            isEmpty = month === undefined || year === undefined || month > 11 || month < 0 || year < 0,
            month = isEmpty ? t.getMonth() : month,
            year = isEmpty ? t.getFullYear() : year,
            d = new Date(year, month, 1),
            daysInCurMonth = new Date(year, month + 1, 0).getDate(),
            nextMonth = (month + 1 + 12) % 12, //+12 because javascript doesn't like -1 % mod
            nextMonthIsInYear = month == 11 ? year + 1 : year,
            prevMonth = (month - 1 + 12) % 12,
            prevMonthIsInYear = month == 0 ? year - 1 : year,
            daysInPrevMonth = new Date(prevMonthIsInYear, prevMonth + 1, 0).getDate(),
            inMonth = -1,
            day = daysInPrevMonth - d.getDay() + 1,
            dateString = '',
            curMonth = longName[d.getMonth()] + ' ' + d.getFullYear(),
            headings = ["S", "M", "T", "W", "H", "F", "S"];

        var prev = {
            year: prevMonthIsInYear,
            month: prevMonth + 1 //set correct 1-12 scale
        };

        var next = {
            year: nextMonthIsInYear,
            month: nextMonth + 1 //set correct 1-12 scale
        };

        //delete children
        while...