JSFiddle - React, Tailwind, and code Playground

by Proviss

HTML

<!doctype html>
<html>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<head>
<title> Calendar Test </title>

<link rel="stylesheet" type="text/css" media="all"
 href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="all"
 href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" />
<style>
*.Date {
    position:absolute;
    text-align: left;
    font-family: "Courier New", monospace;
    font-size: 10pt;
    color: navy; background-color: rgb(230,240,250);
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js">
</script>
<script type='text/javascript'>
$(function() {
 $('.Date').attr('autocomplete','off').datepicker({
  changeMonth: true, changeYear: true,
  gotoCurrent: true,
  showOn: 'button',
  buttonText: 'cal1',
    buttonImage: 'http://jqueryui.com/demos/images/Calendar.gif',  // doesn't work
  buttonImageOnly: true,
  constrainInput: false
 });
});
</script>
</head>
<body>
<form id='test' name='test' method='post'>
<input type="submit" id="Test" name="Test" value="Test">
<input class='Date' style='left:150px;top:200px;' id='TestDate'>
</body>
</html>