JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<div id="modal" class="modal">
  <div class="modal-content"><span class="close">×</span>
    <div id="modalImg"></div>
    <div id="caption"></div>
    <button class="slider-button prev">❮</button> <button class="slider-button next">❯</button>
    <div id="bookRoomForm" style="display: none;">
      <h2>Book Room <span id="modalRoomNumber"></span></h2>
      <div class="emailPreview">
        <span class="req">* Required</span>
        <p>Booking request on behalf of: <input type="text" id="onBehalf" /></p>
        <p>Preference for specific floor(s) and/or room(s)? <input type="text" id="flRoom" style="max-width: 100px; width: 100%;"></p><sup>Insert the actual meeting start time. Do not add additional time for set up.</sup>
        <p style="margin: 0px !important;display:inline-block;padding-right: 10px;">
          <span class="req">*</span>From: <input type="date" id="datePickerFrom" placeholder="dd-mm-yyyy"> at <select id="hourPickerFrom"></select>:<select id="minutePickerFrom"></select><select id="ampmPickerFrom"></select></p>
        <div class="tooltip">
          <div class="icon">i</div>
          <div class="tooltiptext">
            <div class="toolTxt">Please make sure to contact the Security team to arrange access for any external visitors who need access to the office before/after business hours. (Before 9:30 or after 5:30)</div>
          </div>
        </div>
        <p style="margin-top: 5px;"><span class="req">*</span>To: <input type="date" id="datePickerTo" placeholder="dd-mm-yyyy"> at <select id="hourPickerTo"></select>:<select id="minutePickerTo"></select><select id="ampmPickerTo"></select></p>
        <p>Number of in-person Davis Polk attendees: <input type="number" id="dpAttend" style="max-width: 100px; width: 100%;" value="0"></p>
        <p style="display:inline;padding-right: 10px;"><span class="req">*</span>Number of in-person external attendees: <input type="number" id="exAttend" style="max-width: 100px; width: 100%;...