JSFiddle - React, Tailwind, and code Playground

HTML

<div class="google-maps-div" id="popup">
    <div class="google-maps-remove-button" id="popup-button">
        <span class="glyphicon glyphicon-remove"></span>
    </div>
</div>

CSS

.google-maps-div{
     position: fixed;
     bottom: 0;
     right: 0;
     margin-right: 15px;
     margin-bottom: 15px;
     width: 250px;
     height: 150px;
     background-color: yellow;
     border: 1px solid #000000;
     border-radius: 7.5px 7.5px 7.5px 7.5px;
}

.google-maps-div-popup{
     position: fixed;
     bottom: 10%;
     top: 10%;
     width: 80%;
     left: 10%;
     right: 10%;
     height: 75%;
     background-color: yellow;
     border: 1px solid #000000;
     border-radius: 7.5px 7.5px 7.5px 7.5px;
 }

.google-maps-remove-button{
     position: relative;
     top: 2.5%;
     left: 97.5%;
     visibility: hidden;
    width: 100px;
    height: 100px;
    background: red;
}
 }

JavaScript

$(function () {
        $(document).ready(function () {
            $('.google-maps-div').click(function () {
                $('#popup').removeClass('google-maps-div');
                $('#popup').addClass('google-maps-div-popup');
                $('.google-maps-remove-button').css("visibility", "visible");
            })
        })
    })



$(function () {
        $('.google-maps-remove-button').click(function (e) {
            console.log("Cancel clicked !");
            $('#popup').addClass('google-maps-div');
            $('#popup').removeClass('google-maps-div-popup');
            $('.google-maps-remove-button').css("visibility", "hidden");
            e.stopPropagation();
        })
    })