JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="datepicker">

CSS

html { margin: 0; padding: 0; }
    body { font-size: 100%; margin: 0; padding: 1.75em; font-family: 'Helvetica Neue', Arial, sans-serif; }

    h1 { font-size: 1.75em; margin: 0 0 0.6em 0; }
    h2 { font-size: 1.25em; margin: 0 0 0.6em 0; }

    a { color: #2996cc; }
    a:hover { text-decoration: none; }

    p { line-height: 1.5em; }
    .small { color: #666; font-size: 0.875em; }
    .large { font-size: 1.25em; }

    label {
        font-weight: bold;
    }
    input[type="text"] {
        margin: 0.5em 0 3em 0;
        padding: 0.5em;
}
/*!
 * Pikaday
 * Copyright © 2012 David Bushell | BSD & MIT license | http://dbushell.com/
 */

.pika-single {
    z-index: 9999;
    display: block;
    position: relative;
    width: 240px;
    padding: 8px;
    color: #333;
    background: #fff;
    border: 1px solid #ccc;
    border-bottom-color: #bbb;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.pika-single.is-hidden {
    display: none;
}

.pika-single.is-bound {
    position: absolute;
    box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
}

.pika-title {
    position: relative;
    text-align: center;
}

.pika-label {
    display: inline-block;
    *display: inline;
    position: relative;
    z-index: 9999;
    overflow: hidden;
    margin: 0;
    padding: 5px 3px;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    background-color: #fff;
}
.pika-title select {
    cursor: pointer;
    position: absolute;
    z-index: 9998;
    margin: 0;
    left: 0;
    top: 5px;
    opacity: 0;
}

.pika-prev,
.pika-next {
    display: block;
    cursor: pointer;
    position: relative;
    outline: none;
    border: 0;
    padding: 0;
    width: 20px;
    height: 30px;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 75% 75%;
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
    opacity: .5;
    *position: absolute;
    *top:...

JavaScript

(function(e,t,n){"use strict";var r=typeof e.moment=="function",i=!!e.addEventListener,s=e.setTimeout,o=function(e,t,n,r){i?e.addEventListener(t,n,!!r):e.attachEvent("on"+t,n)},u=function(e,t,n,r){i?e.removeEventListener(t,n,!!r):e.detachEvent("on"+t,n)},a=function(e){return e.trim?e.trim():e.replace(/^\s+|\s+$/g,"")},f=function(e,t){return(" "+e.className+" ").indexOf(" "+t+" ")!==-1},l=function(e,t){f(e,t)||(e.className=e.className===""?t:e.className+" "+t)},c=function(e,t){e.className=a((" "+e.className+" ").replace(" "+t+" "," "))},h=function(e){return/Array/.test(Object.prototype.toString.call(e))},p=function(e){return/Date/.test(Object.prototype.toString.call(e))&&!isNaN(e.getTime())},d=function(e){return e%4===0&&e%100!==0||e%400===0},v=function(e,t){return[31,d(e)?29:28,31,30,31,30,31,31,30,31,30,31][t]},m=function(e,t){return e.getTime()===t.getTime()},g=function(e,t,r){var i,s;for(i in t){s=e[i]!==n;if(s&&typeof t[i]=="object"&&t[i].nodeName===n)p(t[i])?r&&(e[i]=new Date(t[i].getTime())):h(t[i])?r&&(e[i]=t[i].slice(0)):e[i]=g({},t[i],r);else if(r||!s)e[i]=t[i]}return e},y={field:null,bound:n,format:"YYYY-MM-DD",defaultDate:null,setDefaultDate:!1,firstDay:0,minDate:null,maxDate:null,yearRange:10,minYear:0,maxYear:9999,minMonth:n,maxMonth:n,isRTL:!1,numberOfMonths:1,i18n:{months:["January","February","March","April","May","June","July","August","September","October","November","December"],weekdays:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],weekdaysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]},onSelect:null,onOpen:null,onClose:null},b=function(e,t,n){t+=e.firstDay;while(t>=7)t-=7;return n?e.i18n.weekdaysShort[t]:e.i18n.weekdays[t]},w=function(e,t,n,r,i){if(i)return'<td class="is-empty"></td>';var s=[];return r&&s.push("is-disabled"),n&&s.push("is-today"),t&&s.push("is-selected"),'<td data-day="'+e+'" class="'+s.join(" ")+'"><button class="pika-button"...