JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>

     <label class="control-label">Arrival Date</label>
     <input id="arrival-date" type="text" placeholder="" class="input-small required-field">

     <label class="control-label">Departure Date</label>
     <input id="departure-date" type="text" placeholder="" class="input-small required-field">
    
    <div id="date-review"></div></body>
</html>

CSS

.ui-datepicker {
   background: #ccc;                    
}

#date-review .ui-datepicker {
background: #fff;            
}

.ui-datepicker-title {
        text-align: center;
    }
    
    .ui-datepicker-prev {
        float: left;
        cursor: pointer;
    }
    
    .ui-datepicker-next {
        float: right;
        cursor: pointer;
    }
    
    .ui-widget-header .ui-icon {
        text-indent: -99999px;
        overflow: hidden;
        background-repeat: no-repeat;
        height: 16px;
        width: 16px;
    }
    
    .ui-datepicker-prev:before, .ui-datepicker-next:after /* Previous */{
        content: "<";
        color: #fff;
        font-size: 1.3em;
        position: absolute;
        top: 7px;
    }
    
    .ui-datepicker-next:after {
        content: ">";
        left: 90%;
    }
    
    .ui-datepicker-prev span, .ui-datepicker-next span /* Previous */{
        display: none;
    }
    
    .ui-icon .ui-icon-circle-triangle-e /* Next */{
    
    }
    
    .ui-datepicker-calendar tbody {
        padding: 10px;
    }
    
    .ui-datepicker-calendar thead tr th span {
        font-size: 0.9em;
        padding: 10px 3px;
    }
    
    .ui-datepicker-calendar thead {
        font-weight: bold; 
        border-bottom: 1px solid #bbb;
        padding: 5px 0 5px 0;
    }
    
    /*.ui-datepicker-calendar thead tr th {
        padding: 3px 0;
        border-bottom: 2px solid #fff;;
    }*/
    
    .ui-datepicker-calendar .ui-datepicker-unselectable {
        
    }
    
    .ui-datepicker-calendar tbody tr td {
        text-align: center;
    }
    
    .ui-datepicker-calendar a.ui-state-default {
        
        display: block;
        padding: 3px 5px;
        text-decoration: none;
        color: #333;
        font-weight: bold;
    }
    
    .ui-datepicker-calendar tbody tr td a.ui-state-active {
        background: #009AFF;
        color: #fff;
        /*border-radius: 5px;*/
    }
    
    .ui-datepicker-calendar tbody tr td...

JavaScript

//Initialize datepickers
$('#date-review').datepicker({
    inline: true,
    disabled: true,
    numberOfMonths: 2
});

$("#arrival-date, #departure-date").datepicker({
    rangeSelect: true,
    beforeShow: customRange,
    onSelect: customRange
});


//Update review calendar with start date
$("#arrival-date").focusout(function() {
    $('#date-review').datepicker("setDate", $("#arrival-date").val());
});



//Highlight dates between when mouseover the actual input field calendars


function customRange(input) {
    if (input.id == "arrival-date") {

        $("#ui-datepicker-div td").die();

        if (selectedDate != null) {
            $('#departure-date').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
        }
    }
    if (input.id == "departure-date") {

        $("#ui-datepicker-div td").live({
            mouseenter: function() {
                $(this).parent().addClass("finalRow");
                $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight");
                $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
                $("#date-review .ui-datepicker-calendar td a").prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
            },
            mouseleave: function() {
                $(this).parent().removeClass("finalRow");
                $("#ui-datepicker-div td").removeClass("highlight");
            }
        });

        var selectedDate = $("#arrival-date").datepicker("getDate");
        if (selectedDate != null) {
            $('#departure-date').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
        }
    }
}