JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<label for="from">From</label>
        <input type="text" id="from" name="from" >
        <label for="to">to</label>
        <input type="text" id="to" name="to">

CSS

td.date-range{
   background-color:yellow;
}
td.start-date{
                background-color:pink;
}

JavaScript

$.widget( "FOO.daterangepicker", {
    options : {
        dateFormat: 'dd/mm/yy',
        numberOfMonths: 1,
        endCalendar: undefined
    },
    _init: function() {

        var self = this;
        var hoverDate = null;
        
        //options for the start date picker
        var startOptions = $.extend({},this.options,{
            onSelect: function(selectedDate, inst) {
                self.endDatepicker.datepicker("option", "minDate", selectedDate);
                
                //setTimeout seems to be required otherwise on the next month doesn't work in the end calandar
                setTimeout(function(){
                    self.endDatepicker.datepicker("show");
                },10);
            }
        });
        
        //options for the end date picker
        var endOptions = $.extend({},this.options,{
            
            beforeShow: function(input, inst) {

                $('#ui-datepicker-div').on('mouseover.babdatepicker','.ui-datepicker-calendar td',function(e) {

                     var hoverDateStr = ($(this).text()+'-'+ (inst.selectedMonth + 1) +'-'+inst.selectedYear);
                     hoverDate = $.datepicker.parseDate('d-m-yy', hoverDateStr);
                     self.endDatepicker.datepicker( "refresh" );
                     e.stopPropagation();
                });
            },

            // Add classes that illustrate the selected range.
            beforeShowDay: function(date) {

                var cssClasses = [];

                if(isStartDate(date)){
                    cssClasses.push('start-date');
                }
                if(isBetweenStartAndEndDate(date)){
                    cssClasses.push('date-range');
                }
                
                return [
                    true,
                    cssClasses.join(' '),
                    ''
                ];
            },

            // Remove the mousover function added with beforeShow
            onClose:...