JSFiddle - React, Tailwind, and code Playground

by Emmanuel Garcia

HTML

<style>
    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>
 
<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3763.008949284085!2d-99.17086540000003!3d19.4120193!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d1ff411eab67cf%3A0xc94fc839955eb7fb!2zQXYgQW1zdGVyZGFtIDEyMiwgSGlww7Nkcm9tbywgQ3VhdWh0w6ltb2MsIDA2MTAwIENkIGRlIE3DqXhpY28sIERGLCBNw6l4aWNv!5e0!3m2!1ses-419!2sus!4v1423620553800" width="600" height="545" frameborder="0" style="border:0"></iframe>
</div>