JSFiddle - React, Tailwind, and code Playground

by rwhal06

HTML

<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.1/release/featherlight.min.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/noelboss/featherlight/1.7.1/release/featherlight.min.css">
You're about to see the Featherlight iphone flicker bug
<div>
  <a href="#" data-featherlight="#modal">Click to open popup</a>
</div>


<div id="modal">

  <form>
    <input type="text" placeholder="Click here first" tabindex="1" />
    <div>
      <input type="text" placeholder="Then click here or X out of the keyboard" style="width: 100%;" tabindex="2" />
    </div>
    <input type="submit" value="fake button" />
  </form>
  Notice that the modal temporarily disappears

</div>

CSS

#modal {
  display: none;
}

.featherlight-content {
  width: 100%;
  min-height: 100px;
  font-size: 16px;
}

.featherlight-content #modal {
  display: block;
}