JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://rawgit.com/jonthornton/jquery-timepicker/master/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/jonthornton/jquery-timepicker/master/jquery.timepicker.css">
<div class="event-form form-screen pop-up">
  <form name="event-form" method="post">
    <h1>Create Event</h1>
    <div class="form-content">
      <input type="text" name="title" placeholder="Title*" required>
      <input type="text" name="start_date" class="date" placeholder="Start Date*" required>
      <input type="text" name="start_time" class="timepicker ui-timepicker-input" placeholder="Start Time*" required>
      <h1 class="time-label">to</h1>
      <input type="text" name="end_date" class="date" placeholder="End Date">
      <input type="text" name="end_time" class="timepicker ui-timepicker-input" placeholder="End Time">
      <input type="text" name="place" placeholder="Place">
      <input type="text" name="description" placeholder="Description">
    </div>
    <button type="submit" class="submit" name="submit" value="submit">Add Event</button>
  </form>
</div>

CSS

/*Form styling*/

.pop-up {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: scroll;
  /* display: none; */
  z-index: 1;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #F9FFF9;
}

.form-screen h1 {
  margin-bottom: 30px;
}

.form-content {
  margin-left: 20px;
  margin-right: 40px;
}

.submit:focus,
.inputfile:focus + label,
input:focus,
textarea {
  outline: #eceae9 auto 5px;
}


/*Exit button*/

.close-pop-up {
  float: right;
}

.icon-x {
  font-size: 30px;
}


/*File upload styling*/

.box {
  text-align: left;
  margin-bottom: 20px;
}

.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.inputfile + label {
  max-width: 80%;
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  padding: 15px;
  border-radius: 5px;
}

.inputfile + label svg {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
  margin-top: -0.25em;
  /* 4px */
  margin-right: 0.25em;
  /* 4px */
}

.inputfile + label {
  color: #453124;
  background-color: #a29891;
}

.inputfile:focus + label,
.inputfile.has-focus + label,
.inputfile + label:hover {
  background-color: #c7c1bd;
}


/*Input styling*/

.form-screen input[type=text],
.form-screen input[type="password"],
input[type=email],
textarea,
.submit {
  display: block;
}

.form-screen input[type=text],
.form-screen input[type="password"],
input[type=email],
textarea {
  cursor: text;
}

.form-screen input[type=text],
.form-screen input[type="password"],
input[type=email],
textarea {
  border: none;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  color: #453124;
  background-color: #d9d5d3;
  font-size: 25px;
  padding: 15px;
  margin-bottom: 20px;
  width: 70%;
}

.form-screen input[type=text]:last-of-type,
.form-screen...

JavaScript

$('input.timepicker').timepicker({
  timeFormat: 'h:i A',
  interval: 30,
  minTime: '8:00am',
  maxTime: '11:00pm',
  // defaultTime: '5:00pm',
  startTime: '8:00am',
  dynamic: true,
  dropdown: true,
  scrollbar: true,
  showLeadingZero: false
});