JSFiddle - React, Tailwind, and code Playground

by plapier

HTML

<div class="fixed-nav">
    <h2>Map</h2>
    <div id="map"></div>
    <h2>This is my header</h2>
    <p>Here's my content</p>
</div>

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    new google.maps.Map(document.getElementById("map"), mapOptions);    
</script>

CSS

body {
    height: 4000px;
}

#map {
    height: 200px;
    width: 200px;
}

.fixed-nav {
    border: 1px solid red;

 
    overflow: hidden;
    position: fixed;
    -webkit-transform: translateZ(0); /* Force GPU Compositing */
}