JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="wrap">
    <div id="sandbox-container" class="content">
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium nisl nibh, in varius est lacinia in. Aliquam erat volutpat. Curabitur quis arcu in ipsum ultricies adipiscing porta sed enim. Vivamus quis nisl nunc. Curabitur vestibulum in neque et pharetra. Integer elementum nunc non felis interdum, ac malesuada turpis condimentum. Sed dui nunc, fringilla sit amet varius at, accumsan eget velit. In iaculis erat pretium euismod faucibus. Morbi neque lectus, gravida quis dolor et, malesuada sodales augue. Nullam auctor magna orci, eu laoreet nulla rhoncus non. Ut dignissim dapibus ligula, eget feugiat odio rutrum quis.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium nisl nibh, in varius est lacinia in. Aliquam erat volutpat. Curabitur quis arcu in ipsum ultricies adipiscing porta sed enim. Vivamus quis nisl nunc. Curabitur vestibulum in neque et pharetra. Integer elementum nunc non felis interdum, ac malesuada turpis condimentum. Sed dui nunc, fringilla sit amet varius at, accumsan eget velit. In iaculis erat pretium euismod faucibus. Morbi neque lectus, gravida quis dolor et, malesuada sodales augue. Nullam auctor magna orci, eu laoreet nulla rhoncus non. Ut dignissim dapibus ligula, eget feugiat odio rutrum quis.</p>
        <p>Aliquam scelerisque, turpis a commodo imperdiet, lacus erat vulputate odio, et feugiat nunc nibh quis lacus. Pellentesque sit amet hendrerit eros, accumsan consequat arcu. Quisque adipiscing a magna sit amet viverra. Pellentesque vel eleifend magna, id gravida justo. Duis fermentum lacus sit amet enim posuere consequat. Aenean dictum, risus auctor viverra rutrum, libero urna sollicitudin odio, et accumsan felis...

CSS

html, body {
    overflow:hidden;
}
.wrap {
    position:fixed;
    height:100%;
    width:100%;
}
.content {
    position: relative;
    height: 100%;
    overflow: auto;
}

/*!
 * Datepicker for Bootstrap
 *
 * Copyright 2012 Stefan Petre
 * Improvements by Andrew Rowls
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 */
.datepicker {
  padding: 4px;
  border-radius: 4px;
  direction: ltr;
  /*.dow {
		border-top: 1px solid #ddd !important;
	}*/
}
.datepicker-inline {
  width: 220px;
}
.datepicker.datepicker-rtl {
  direction: rtl;
}
.datepicker.datepicker-rtl table tr td span {
  float: right;
}
.datepicker-dropdown {
  top: 0;
  left: 0;
}
.datepicker-dropdown:before {
  content: '';
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-top: 0;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: absolute;
}
.datepicker-dropdown:after {
  content: '';
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-top: 0;
  position: absolute;
}
.datepicker-dropdown.datepicker-orient-left:before {
  left: 6px;
}
.datepicker-dropdown.datepicker-orient-left:after {
  left: 7px;
}
.datepicker-dropdown.datepicker-orient-right:before {
  right: 6px;
}
.datepicker-dropdown.datepicker-orient-right:after {
  right: 7px;
}
.datepicker-dropdown.datepicker-orient-top:before {
  top: -7px;
}
.datepicker-dropdown.datepicker-orient-top:after {
  top: -6px;
}
.datepicker-dropdown.datepicker-orient-bottom:before {
  bottom: -7px;
  border-bottom: 0;
  border-top: 7px solid #999;
}
.datepicker-dropdown.datepicker-orient-bottom:after {
  bottom: -6px;
  border-bottom: 0;
  border-top: 6px solid #fff;
}
.datepicker > div {
  display: none;
}
.datepicker.days div.datepicker-days {
  display: block;
}
.datepicker.months div.datepicker-months {
  display:...

JavaScript

/* =========================================================
 * bootstrap-datepicker.js
 * http://www.eyecon.ro/bootstrap-datepicker
 * =========================================================
 * Copyright 2012 Stefan Petre
 * Improvements by Andrew Rowls
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================= */

! function ($) {

    function UTCDate() {
        return new Date(Date.UTC.apply(Date, arguments));
    }

    function UTCToday() {
        var today = new Date();
        return UTCDate(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate());
    }

    // Picker object

    var Datepicker = function (element, options) {
        var that = this;

        this.element = $(element);
        this.language = options.language || this.element.data('date-language') || "en";
        this.language = this.language in dates ? this.language : this.language.split('-')[0]; //Check if "de-DE" style date is available, if not language should fallback to 2 letter code eg "de"
        this.language = this.language in dates ? this.language : "en";
        this.isRTL = dates[this.language].rtl || false;
        this.format = DPGlobal.parseFormat(options.format || this.element.data('date-format') || dates[this.language].format || 'mm/dd/yyyy');
        this.isInline = false;
        this.isInput = this.element.is('input');
        this.component = this.element.is('.date') ? this.element.find('.add-on, .btn') :...