JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<!DOCTYPE html>
<html>
<head>
    <title>title</title>
</head>
<body style="background-color: black;">
    <div style="overflow: scroll; height: 600px; background-color: red; border: solid 3px yellow;">
        <div style="height: 1800px; background-color: white;">
            <br /><br /><br /><br /><br /><br /><br />
            <p>Try scrolling, whilst the datepicker is shown. The datepicker is not noticing that it is inside a scrollable div element, and doesn't move with the input, when the contents of the div element is scrolled</p>
            <br /><br /><br /><br /><br /><br /><br />
            <input type="text" id="a" name="a" />
            <br /><br /><br /><br /><br /><br /><br />
        </div>
    </div>
</body>

JavaScript

$("input").datepicker();