JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text">
<button 
  aria-controls="two" 
  aria-owns="true" 
  aria-haspopup="true"
  aria-flowto="two"
  onclick="toggleTwo();">
  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">
  <span class="inner">
    <button 
      class="close"
      onclick="toggleTwo();">
      CLOSE POPUP
    </button>
    <h2>hello, I'm div 2.</h2>
    <input type="text"><button>button</button><input type="text"><button>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 toggleTwo = function () {
	var oldValue = document.querySelector(".two").getAttribute("aria-hidden");
  var newValue = (oldValue=="true") ? false : true;
	document.querySelector(".two").setAttribute("aria-hidden", newValue);
}
</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%;
}