JSFiddle - React, Tailwind, and code Playground

HTML

<div class="calenadar font_datepicker_page"></div>

<div class="calendar-item-popup">
<div class="box-title">Праздники:</div>
<div class="box-cont"></div>
<div class="in"><div class="in"></div></div>
</div>

CSS

.calendar-item-popup {
padding: 8px;
font-size: 12px;
color: #000;
text-shadow: 0 0 1px #fff;
z-index: 10;
display: none;
}
.calendar-item-popup, .calendar-item-popup .in {
border: 1px solid #846403;
background: #eadbae;
background: rgba(234,219,174,0.9);
border-radius: 0px 25px 25px 20px;
box-shadow: 2px 2px 10px 0 #4b3c0f;
position: absolute;
}
.calendar-item-popup .box-title {
font-weight: bold;
margin: 0 0 3px;
}
.calendar-item-popup .box-cont {
max-width: 240px;
}
.calendar-item-popup >.in {
top: -12px;
left: -18px;
width: 12px;
height: 12px;
position: absolute:;
}
.calendar-item-popup .in > .in {
top: -10px;
left: -12px;
width: 8px;
height: 8px;
position: absolute:;
}

JavaScript

$('.font_datepicker_page').datepicker({
    
    onSelect: function(dateText, inst) {
        var day = parseInt(dateText.substr(3, 2), 10);
        var targetOffset = $('a', this).filter(function() { return $(this).text() == day; }).offset();
           SelectPresentByDay(dateText, targetOffset);
                      
                     },
                   
              changeMonth: true,
              altFormat: "yy-MM-dd",
              yearRange: "2002:2012",
             
 }); 

function SelectPresentByDay(date, targetOffset) {
    html = 'В этот день нет праздника.';
     $(".calendar-item-popup .box-cont").html(html);
                      
            var etop=Math.floor(targetOffset.top)+52;
			var eleft=Math.floor(targetOffset.left)+57;
$('.calendar-item-popup').css({top:etop,left:eleft}).fadeIn(190);  
}