JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rancho|.css">
<div class="text">The current Glitch time is <span id="current"></span></div>

<label for="date">Date: </label><input type="text" id="date" /> 
<label for="time">Time: </label><input type="text" id="time" placeholder="hh:mm" /> 
<button id="go">Go!</button>

CSS

body {
    width: 600px;
    margin: 50px auto;
    font-family: 'Rancho', sans-serif;
    font-weight: 400;
    font-size: 24px;
}

sup {
    font-size: 0.7em;
}

#ui-datepicker-div {
    font-size: 11px;
}

input {
    width: 100px;
    margin-right: 10px;
    margin-left: 3px;
    padding: 3px;
}

#go {
    padding: 3px 8px;
}

.text {
    color: #999;
    font-size: 19px;
}

#current {
    color: #333;
    display: block;
    font-size: 36px;
    margin-top: -5px;
    margin-bottom: 20px;
    border-bottom: 1px solid #999;
    padding-bottom: 10px;
}

JavaScript

var nameOfMonths = ["Primuary", "Spork", "Bruise", "Candy", "Fever", "Junuary", "Septa", "Remember", "Doom", "Widdershins", "Eleventy", "Recurse"],
    nameOfDays = ["Hairday", "Moonday", "Twoday", "Weddingday", "Theday", "Fryday", "Standday", "Fabday"];

// Microtemplating function
function t(s, d) {
    for (var p in d)
    s = s.replace(new RegExp('{' + p + '}', 'g'), d[p]);
    return s;
}

// Converted from PHP code posted on developer.glitch.com
function dayToDate(id) {
    var months = [29, 3, 53, 17, 73, 19, 13, 37, 5, 47, 11, 1],
        cd = 0;

    for (var i = 0; i < months.length; i++) {
        cd += months[i];
        if (cd > id) {
            var m = i + 1,
                d = id + 1 - (cd - months[i]);
            return [m, d];
        }
    }

    return [0, 0];
}


// Adds human readable elements to date and formats it using a template
function prettyDate(date) {
    if (date.hour > 12) {
        var hourSuffix = 'pm';
        date.hour -= 12;
    } else {
        var hourSuffix = 'am';
    }

    if (date.minute < 10) {
        date.minute = '0' + date.minute;
    }

    if (date.dayOfMonth % 10 === 1) {
        var daySuffix = 'st';
    } else if (date.dayOfMonth % 10 === 2) {
        var daySuffix = 'nd';
    } else if (date.dayOfMonth % 10 === 3) {
        var daySuffix = 'rd';
    } else {
        var daySuffix = 'th';
    }

    return t ('{hour}:{minute} {hourSuffix} on {weekday} the {day}<sup>{daySuffix}</sup> of {month}, Year {year}', {
        weekday: nameOfDays[date.dayOfWeek],
        hour: date.hour,
        minute: date.minute,
        hourSuffix: hourSuffix,
        day: date.dateOfMonth,
        daySuffix: daySuffix,
        day: date.dayOfMonth,
        month: nameOfMonths[date.month - 1],
        year: date.year
    });
}

// Converted from code posted developer.glitch.com
// Returns a glitchDate object that contains all the date information
function generateDate (time){
    var glitchDate = {},
        sec = time -...