JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.datepicker.css">
<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>

</div><!-- End demo -->



<div class="demo-description">
<p>The datepicker is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div><!-- End demo-description -->

CSS

/* Quick & dirty way -- relies on !important to override the default calculations done by jquery UI and inserted inline. */

#ui-datepicker-div {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin-left: -96px; /* approx half the height of the datepicker div - adjust based on your size */
    margin-top: -73px; /* half the height of the datepicker div - adjust based on your size */
}


body {
    font-size: 62.5%;
}

table {
    font-size: 1em;
}

/* Site
   -------------------------------- */

body {
    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
}

/* Layout
   -------------------------------- */

.layout-grid {
    width: 960px;
}

.layout-grid td {
    vertical-align: top;
}

.layout-grid td.left-nav {
    width: 140px;
}

.layout-grid td.normal {
    border-left: 1px solid #eee;
    padding: 20px 24px;
    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
}

.layout-grid td.demos {
    background: url('/images/demos_bg.jpg') no-repeat;
    height: 337px;
    overflow: hidden;
}

/* Normal
   -------------------------------- */

.normal h3,
.normal h4 {
    margin: 0;
    font-weight: normal;
}

.normal h3 {
    padding: 0 0 9px;
    font-size: 1.8em;
}

.normal h4 {
    padding-bottom: 21px;
    border-bottom: 1px dashed #999;
    font-size: 1.2em;
    font-weight: bold;
}

.normal p {
    font-size: 1.2em;
}

/* Demos */

.demos-nav, .demos-nav dt, .demos-nav dd, .demos-nav ul, .demos-nav li {
    margin: 0;
    padding: 0
}

.demos-nav {
    float: left;
    width: 170px;
    font-size: 1.3em;
}

.demos-nav dt,
.demos-nav h4 {
    margin: 0;
    padding: 0;
    font: normal 1.1em "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    color: #e87b10;
}

.demos-nav dt,
.demos-nav h4 {
    margin-top: 1.5em;
    margin-bottom: 0;
    padding-left: 8px;
    padding-bottom:5px;
    line-height: 1.2em;
    border-bottom: 1px solid...

JavaScript

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