JSFiddle - React, Tailwind, and code Playground

CSS

/*styles for jquery ui daterangepicker plugin */

.ui-daterangepickercontain {
	position: absolute;
	z-index: 999;
}
.ui-daterangepickercontain .ui-daterangepicker {
	float: left;
	padding: 5px !important;
	width: auto;
	display: inline;
	background-image: none !important;
	clear: left;
}
.ui-daterangepicker ul, .ui-daterangepicker .ranges, .ui-daterangepicker .range-start, .ui-daterangepicker .range-end {
	float: left;
	padding: 0;
	margin: 0;
}
.ui-daterangepicker .ranges {
	width: auto;
	position: relative;
	padding: 5px 5px 40px 0;
	margin-left: 10px;
}
.ui-daterangepicker .range-start, .ui-daterangepicker .range-end {
	margin-left: 5px;
}
.ui-daterangepicker button.btnDone {
	margin: 0 5px 5px 0;
	position: absolute;
	bottom: 0;
	right: 0;
	clear: both;
	cursor: pointer;
	font-size: 1.1em;
}
.ui-daterangepicker ul {
	width: 17.6em;
	background: none;
	border: 0;
}
.ui-daterangepicker li {
	list-style: none;
	padding: 1px;
	cursor: pointer;
	margin: 1px 0;
}
.ui-daterangepicker li.ui-state-hover, .ui-daterangepicker li.ui-state-active {
	padding: 0;
}
.ui-daterangepicker li.preset_0 {
	margin-top: 1.5em !important;
}
.ui-daterangepicker .ui-widget-content a {
	text-decoration: none !important;
}
.ui-daterangepicker li a {
	font-weight: normal;
	margin: .3em .5em;
	display: block;
}
.ui-daterangepicker li span {
	float: right;
	margin: .3em .2em;
}
.ui-daterangepicker .title-start, .ui-daterangepicker .title-end {
	display: block;
	margin: 0 0 .2em;
	font-size: 1em;
	padding: 0 4px 2px;
}
.ui-daterangepicker .ui-datepicker-inline {
	font-size: 1em;
}
.ui-daterangepicker-arrows {
	padding: 2px;
	width: 204px;
	position: relative;
}
.ui-daterangepicker-arrows input.ui-rangepicker-input {
	width: 158px;
	margin: 0 2px 0 20px;
	padding: 2px;
	height: 1.1em;
}
.ui-daterangepicker-arrows .ui-daterangepicker-prev, .ui-daterangepicker-arrows .ui-daterangepicker-next {
	position: absolute;
	top: 2px; 
	padding: 1px;
}
.ui-daterangepicker-arrows .ui-daterangepicker-prev...

JavaScript

/**
 * --------------------------------------------------------------------
 * jQuery-Plugin "daterangepicker.jQuery.js"
 * by Scott Jehl, scott@filamentgroup.com
 * http://www.filamentgroup.com
 * reference article: http://www.filamentgroup.com/lab/update_date_range_picker_with_jquery_ui/
 * demo page: http://www.filamentgroup.com/examples/daterangepicker/
 * 
 * Copyright (c) 2008 Filament Group, Inc
 * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
 *
 * Dependencies: jquery, jquery UI datepicker, date.js library (included at bottom), jQuery UI CSS Framework
 * Changelog:
 * 	10.23.2008 initial Version
 *  11.12.2008 changed dateFormat option to allow custom date formatting (credit: http://alexgoldstone.com/)
 *  01.04.09 updated markup to new jQuery UI CSS Framework
 *  01.19.2008 changed presets hash to support different text 
 * --------------------------------------------------------------------
 */
jQuery.fn.daterangepicker = function(settings){
	var rangeInput = jQuery(this);
	
	//defaults
	var options = jQuery.extend({
		presetRanges: [
			{text: 'Today', dateStart: 'today', dateEnd: 'today' },
			{text: 'Last 7 days', dateStart: 'today-7days', dateEnd: 'today' },
			{text: 'Month to date', dateStart: function(){ return Date.parse('today').moveToFirstDayOfMonth();  }, dateEnd: 'today' },
			{text: 'Year to date', dateStart: function(){ var x= Date.parse('today'); x.setMonth(0); x.setDate(1); return x; }, dateEnd: 'today' },
			//extras:
			{text: 'The previous Month', dateStart: function(){ return Date.parse('1 month ago').moveToFirstDayOfMonth();  }, dateEnd: function(){ return Date.parse('1 month ago').moveToLastDayOfMonth();  } }
			//{text: 'Tomorrow', dateStart: 'Tomorrow', dateEnd: 'Tomorrow' },
			//{text: 'Ad Campaign', dateStart: '03/07/08', dateEnd: 'Today' },
			//{text: 'Last 30 Days', dateStart: 'Today-30', dateEnd: 'Today' },
			//{text: 'Next 30...