JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text">
<button 
   id="twoButton"
  onclick="openTwo();">
  TOGGLE DIV #2
</button>
<input type="text"><button>button</button>
<div class="one">
  <h2>hello, i'm div 1</h2><input type="text"><button>button</button><input type="text">  <button>button</button>
</div>
<div class="two" id="two" aria-hidden="true" tabindex="-1">
  <span class="inner">
    <button 
      class="close"
      onclick="closeTwo();">
      CLOSE POPUP
    </button>
    <h2>hello, I'm div 2.</h2>
    <input type="text"><button>button</button><input type="text"><button id="lastItemInModal">button</button>
  </span>
</div>
<div class="three">
  <h2>hello i'm div 3.</h2>
  <input type="text"><button>button</button><input type="text"><button>button</button>
</div>
<input type="text"><button>button</button><input type="text"><button>button</button>

<script>
console.clear();
var openTwo = function () {
	document.querySelector(".two").setAttribute("aria-hidden", false);
  document.getElementById("two").focus();
}
var closeTwo = function () {
	document.querySelector(".two").setAttribute("aria-hidden", true);
  document.getElementById("twoButton").focus();
}

document.getElementById('lastItemInModal').addEventListener('keydown', function (e) {
  e.preventDefault();
    var key = e.keyCode;
    if (key === 9) { 
      document.getElementById("two").focus();
    }
});
</script>

CSS

div {border: solid 1px green; padding: 10px; margin: 10px;}
[aria-hidden="true"] [tabindex="0"] {
  border: dashed 1px red;
}

[aria-hidden="true"] { opacity: .1; }
.close {
  float: right;
}
.two[aria-hidden="false"]{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(55,55,55,.8);
  padding: 50px;
}
[aria-hidden="false"]  .inner {
  background: white;
  border: solid 1px green;
  display: block;
  padding: 10px;
  height: 90%;
}