JSFiddle - React, Tailwind, and code Playground

HTML

<div class="date-picker-block">
            <div class="date-picker"></div>
            <input placeholder="From" type="text" id="date-from" class="date-picker" />
            <input placeholder="To" type="text" id="date-to" class="date-picker" />
        </div>

CSS

.dp-highlight .ui-state-default {
        background: #009bd8;
        color: #ffffff;
    }

JavaScript

$(".date-picker").datepicker({
        numberOfMonths: 3,
        beforeShowDay: function(date) {
            var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#date-from").val());
            var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#date-to").val());
            return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
        },
        onSelect: function(dateText, inst) {
            var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#date-from").val());
            var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#date-to").val());
            if (!date1 || date2) {
                $("#date-from").val(dateText);
                $("#date-to").val("");
                $(this).datepicker("option", "minDate", dateText);
            } else {
                $("#date-to").val(dateText);
                $(this).datepicker("option", "minDate", null);
            }
        }
    });