JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <link rel="stylesheet" href="http://www.styledisplay.com/scripts/slimpicker/pagestyle.css" media="screen, projection" />
    <link rel="stylesheet" href="http://www.styledisplay.com/scripts/slimpicker/slimpicker.css" media="screen, projection" />
    <script src="http://www.styledisplay.com/scripts/slimpicker/mootools-1.2.4-core-yc.js"></script>
    <script src="http://www.styledisplay.com/scripts/slimpicker/mootools-1.2.4.4-more-yc.js"></script>
    
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#button").click(function () {
                alert("I'm inside jQuery function!");
            });
        });
    </script>
</head>
<body>
    <div class="container">
    <h1>SlimPicker</h1>
    <div class="intro">
        <p>Date Picker that works in IFrames. Also allows for keyboard navigation.</p>
    </div>
    <p>
        <label for="new_day">default calendar</label>
        <input id="new_day" name="new_day" type="text" class="slimpicker" autocomplete="off" value="" />
    </p>
    <p>
        <label for="birthday">calendar with options</label>
        <input id="birthday" name="birthday" type="text" class="slimpicker" autocomplete="off" alt="{
            dayChars:3,
            dayNames:['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
            daysInMonth:[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
            format:'yyyy-mm-dd',
            monthNames:['Januar', 'Februar', 'M&auml;rz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
            startDay:1,
            yearOrder:'desc',
            yearRange:90,
            yearStart:2007
        }" value="1980-03-13" />
    </p>
    <p>
        This button uses <strong>jquery-1.7.2.min.js plugin</strong>
        <input type="button" id="button" value="Click me" style="{text-align:center}"/>
  ...

JavaScript

/*
---
description: Date picker that works in an iframe and allows for keyboard navigation.

license: MIT-style

authors:
- Micah Nolte

requires:
- core:1.2.4
- core:1.2.4/Array
- core:1.2.4/String
- /MooTools.More
- /Date
- /IFrameShim

provides: [SlimPicker]

...
*/
(function($) {
var SlimPicker = this.SlimPicker = new Class({

    Implements: [Options, Events],

    options: {
        containerClass: 'sp_container',   // This will always start at the top left of the input's location.
        calendarClass: 'sp_cal',          // Use this to alter the placement of the calendar in the CSS.
        hoverClass: 'sp_hover',           // If using the keyboard, this gets moved around the calendar by arrow keys.
        selectedClass: 'sp_selected',     // The date picked up from what was in the input field.
        todayClass: 'sp_today',           // Always just on today. The sp_selected usually overrides this.
        emptyClass: 'sp_empty',           // Placed on the <td> of a date with no day in it.
        dayClass: 'sp_day',               // Placed on the <td> with a day in it.
        monthClass: 'sp_month',           // On the dropdown for month.
        yearClass: 'sp_year',             // On the dropdown for year.

        fadeDuration: 200,                // How fast the calendar fades in and out.
        hideDelay: 500,                   // How long to wait to close the calendar after the mouse leaves.
        extendedDelay: 5000,              // After a dropdown is open, how long to wait before we give up and hide the calendar.
        showMonth: true,                  // Add the dropdown select for month.
        showYear: true,                   // Add the dropdown select for year.
        autoHide: true,                   // Without this, it won't set a timer to hide the calendar whenever you move away.
        forceDocBoundary: true,           // If the calendar would be shown outside the document, then flip the direction it shows up.
       ...