JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/Paul-DS/bootstrap-year-calendar/master/js/bootstrap-year-calendar.js"></script>
<div class="calendar" data-provide="calendar"></div>

CSS

/* 
 * Bootstrap year calendar v1.1.0
 * Created by Paul David-Sivelle
 * Licensed under the Apache License, Version 2.0
 */

.calendar {
  padding: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    overflow: auto;
    direction: ltr;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select:  none;
}

#div.calendar{
  direction: inherit;
}

.calendar:after {
  clear: both;
  content: "";
  display: block
}

.calendar.calendar-rtl {
  direction: rtl
}

.calendar.calendar-rtl table tr td span {
  float: right
}

.calendar table {
  margin: auto
}

.calendar table td,
.calendar table th {
  text-align: center;
  width: 20px;
  height: 20px;
  border: none;
  padding: 4px 5px;
  font-size: 12px
}

.calendar .calendar-header {
  width: 100%;
  margin-bottom: 20px
}

.calendar .calendar-header table {
  width: 100%
}

.calendar .calendar-header table th {
  font-size: 22px;
  padding: 5px 10px
}

.calendar .calendar-header table th:hover {
  background: #eee;
  cursor: pointer
}

.calendar .calendar-header table th.disabled,
.calendar .calendar-header table th.disabled:hover {
  background: 0 0;
  cursor: default;
  color: #fff
}

.calendar .calendar-header table th.next,
.calendar .calendar-header table th.prev {
  width: 20px
}

.calendar .year-title {
  font-weight: 700;
  text-align: center;
  height: 20px;
  width: auto
}

.calendar .year-neighbor {
  color: #aaa
}

.calendar .year-neighbor2,
.calendar table.month tr td.disabled,
.calendar table.month tr td.disabled:hover {
  color: #ddd
}

.calendar .months-container {
  width: 100%;
  display: none;
  direction: ltr;
}

.calendar .month-container {
    min-width: 180px;
    text-align: center;
    height: 200px;
    padding: 0;
    direction: ltr;
}     

.calendar table.month th.month-title {
  font-size: 16px;
  padding-bottom: 5px
}

.calendar table.month...

JavaScript

/* =========================================================
 * Bootstrap year calendar v1.1.0
 * Repo: https://github.com/Paul-DS/bootstrap-year-calendar
 * =========================================================
 * Created by Paul David-Sivelle
 *
 * 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($) {
  var Calendar = function(element, options) {
    this.element = element;
    this.element.addClass('calendar');

    this._initializeEvents(options);
    this._initializeOptions(options);
    this.setYear(this.options.startYear);
  };

  Calendar.prototype = {
    constructor: Calendar,
    _initializeOptions: function(opt) {
      if (opt == null) {
        opt = [];
      }

      this.options = {
        startYear: !isNaN(parseInt(opt.startYear)) ? parseInt(opt.startYear) : new Date().getFullYear(),
        minDate: opt.minDate instanceof Date ? opt.minDate : null,
        maxDate: opt.maxDate instanceof Date ? opt.maxDate : null,
        language: (opt.language != null && dates[opt.language] != null) ? opt.language : 'en',
        allowOverlap: opt.allowOverlap != null ? opt.allowOverlap : true,
        displayWeekNumber: opt.displayWeekNumber != null ? opt.displayWeekNumber : false,
        displayDisabledDataSource: opt.displayDisabledDataSource != null ? opt.displayDisabledDataSource : false,
        displayHeader: opt.displayHeader != null ? opt.displayHeader : true,
       ...