JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://rawgit.com/noelboss/featherlight/master/src/featherlight.css">
<script src="https://rawgit.com/noelboss/featherlight/master/src/featherlight.js"></script>
<link rel="stylesheet" href="https://rawgit.com/noelboss/featherlight/master/src/featherlight.gallery.css">
<script src="https://rawgit.com/noelboss/featherlight/master/src/featherlight.gallery.js"></script>
<div style="display: none;">
  <div id="modal">
  My form NEEDS to support tabindex. If Featherlight is going to set tabindex to -1 for anything (even  temporarily), it should only be for elements that aren't inside the modal.
    <div class="mainInputWrapper">
      <input type="text" name="fullname" placeholder="Your Name" required id="firstname" /><span class="forValidationDisplay"></span>
    </div>
    <div class="mainInputWrapper">
      <input type="email" name="email" placeholder="Your Best Email Address*" required id="email" /><span class="forValidationDisplay"></span>
    </div>
    <div>
      <textarea name="message"  cols="30" rows="10"></textarea>
    </div>
    <button>
      Submit
    </button>
  </div>
</div>
<a class="role-element leadstyle-link" href="#" data-featherlight="#modal">Click here if you're interested</a>

CSS

#modal {
  width: 300px;
  height: 300px;
}

.featherlight-content {
  width: 400px;
  height: 300px;
}