JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<div class="mapouter">
<div class="gmap_canvas">
<iframe width="100%" height="100%" id="gmap_canvas" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.6620068429975!2d-0.12953152300615753!3d51.51941660982498!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761b323093d307%3A0x2fb199016d5642a7!2sThe%20British%20Museum!5e0!3m2!1sen!2spt!4v1707916104479!5m2!1sen!2spt" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div>

CSS

*:focus {
    outline: none !important;
    border: none !important;
}

iframe {
    outline: none !important;
    border: none !important;
}
iframe:focus {
    outline: none !important;
    border: none !important;
    
}
#gmap_canvas:focus {
    outline: none !important;
    border: none !important;
}

.mapouter:focus {
    outline: none !important;
    border: none !important;
}


.mapouter {
position: relative;
text-align: right;
height: 300px;
width: 80%;
border: 4px solid #ccc;
margin: 0 auto;
}
.gmap_canvas {
overflow: hidden;
background: none!important;
height: 100%;
width: 100%;
}