JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0">
    <meta charset="utf-8"/>
    <style>
      html, body {
        font-family: sans-serif;
        width: 100%;
        height: 100%;
        margin: 0;
      }

      #map-div {
        width: 100%;
        height: 100%;
      }

      #shadow {
        position: fixed;
        top: 50px;
        left: 50px;
        z-index: 1000;
      }

      #input {
        position: fixed;
        top: 100px;
        left: 50px;
        z-index: 1000;
      }
    </style>
  </head>
  <body>
    <div id="shadow"></div>
    <input id="input" onfocus=""></input>
  <div id="map-div"></div>
  <script>
    document.querySelector('#shadow')
      .attachShadow({mode:'open'})
      .appendChild(document.createElement('input'));

    window._mapsLoaded = () => {
      let map = new google.maps.Map(document.querySelector('#map-div'), {
        center: new google.maps.LatLng(39.75, -86.16),
        zoom: 11,
      });
    }
    
    function focusOnShadow() {
    	window.location.hash = '#tries';
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=_mapsLoaded"></script>
  </body>
</html>