JSFiddle - React, Tailwind, and code Playground

by Marech

HTML

<script src="https://fullcalendar.io/releases/core/4.2.0/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/daygrid/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/timegrid/4.2.0/main.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css">
<link rel="stylesheet" href="https://fullcalendar.io/releases/core/4.2.0/main.min.css">
<link rel="stylesheet" href="https://fullcalendar.io/releases/daygrid/4.2.0/main.min.css">
<link rel="stylesheet" href="https://fullcalendar.io/releases/timegrid/4.2.0/main.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<button class="btn btn-primary btn-lg"  id="display-modal">
    Launch Horizontal Form
</button>

<!-- The View Alarm Modal -->
<div class="modal" id="view-alarm">
  <div class="modal-dialog" style="width:1200px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close dismiss" data-dismiss="modal" aria-label="Cancel"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="viewAlarm-title"></h4>
      </div>
      <div class="modal-body" id="calendar-results-body">
        <div id="calendar-results-div" class="row">
          <div style="padding: 0px 20px 0px 20px"   id="calendar-results" name="calendar"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button id="button-delete" type="button" class="btn btn-success btn-lg" onclick="">OK</button>
        <button type="button" class="btn btn-danger btn-lg...

JavaScript

// Get the modal
var modal = document.getElementById("view-alarm");

// Get the button that opens the modal
var btn = document.getElementById("display-modal");

var elements = [
  {
    "end": "2019-03-11T19:02:00.000Z",
    "id": 0,
    "start": "2019-03-11T04:32:00.000Z"
  },
  {
    "end": "2019-03-12T19:02:00.000Z",
    "id": 1,
    "start": "2019-03-12T04:32:00.000Z"
  },
  {
    "end": "2019-03-13T19:02:00.000Z",
    "id": 2,
    "start": "2019-03-13T04:32:00.000Z"
  },
  {
    "end": "2019-03-14T19:02:00.000Z",
    "id": 3,
    "start": "2019-03-14T04:32:00.000Z"
  },
  {
    "end": "2019-03-15T19:02:00.000Z",
    "id": 4,
    "start": "2019-03-15T04:32:00.000Z"
  },
  {
    "end": "2019-03-18T19:02:00.000Z",
    "id": 5,
    "start": "2019-03-18T04:32:00.000Z"
  },
  {
    "end": "2019-03-19T19:02:00.000Z",
    "id": 6,
    "start": "2019-03-19T04:32:00.000Z"
  },
  {
    "end": "2019-03-20T19:02:00.000Z",
    "id": 7,
    "start": "2019-03-20T04:32:00.000Z"
  },
  {
    "end": "2019-03-21T19:02:00.000Z",
    "id": 8,
    "start": "2019-03-21T04:32:00.000Z"
  },
  {
    "end": "2019-03-22T19:02:00.000Z",
    "id": 9,
    "start": "2019-03-22T04:32:00.000Z"
  },
  {
    "end": "2019-03-25T16:36:00.000Z",
    "id": 10,
    "start": "2019-03-25T04:32:00.000Z"
  },
  {
    "end": "2019-03-25T19:02:00.000Z",
    "id": 11,
    "start": "2019-03-25T16:56:00.000Z"
  },
  {
    "end": "2019-03-26T19:02:00.000Z",
    "id": 12,
    "start": "2019-03-26T04:32:00.000Z"
  },
  {
    "end": "2019-03-27T19:04:00.000Z",
    "id": 13,
    "start": "2019-03-27T04:32:00.000Z"
  },
  {
    "end": "2019-03-28T19:02:00.000Z",
    "id": 14,
    "start": "2019-03-28T04:32:00.000Z"
  },
  {
    "end": "2019-03-29T19:02:00.000Z",
    "id": 15,
    "start": "2019-03-29T04:32:00.000Z"
  },
  {
    "end": "2019-03-06T19:02:00.000Z",
    "id": 16,
    "start": "2019-03-06T07:38:00.000Z"
  },
  {
    "end": "2019-03-07T19:02:00.000Z",
    "id": 17,
    "start":...