JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jQueryUI Datepicker Demo</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.js"></script>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css"
            type="text/css" media="all" />
    </head>
    <body>
        <div>
            <label for="datepicker">Pick a Date:</label>
            <input type="text" name="datepicker" id="datepicker" />
        </div>
        <hr />
        
        <p>When the browser viewport (or jsfiddle "result" window) is wider than 400px, it appears that jQueryUI  is calculating the required datepicker offset relative to the HTML element's top/left coordinates and then applying it relative to the BODY element, so it ends up in the wrong place.</p>
        
        <p><strong>You may need to expand the jsfiddle 'Result' panel to reproduce this behaviour</strong></p>
        </body>
    </html>

CSS

html { background-color: #999; min-height: 100%; }
body { width: 400px; margin: 0px auto; background-color: #fff; }

/* this rule breaks the datepicker and I can't work out why... */
body { position: relative; }

JavaScript

$(function () {
                $("#datepicker").datepicker();
            });