JSFiddle - React, Tailwind, and code Playground

by AndreaLigios

HTML

<div class="container">
        <button>shrink container</button>
        <div class="scaledobject"></div>
    </div>


<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("button").click(function() {
            $(".container").toggleClass("shrinked-container");
        });
    });
</script>

CSS

html,body {
    height: 100%;
    margin: 0;
}

button {
    position: absolute;
    top: 0;
    left: 0;
}

div.container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    background: red;
}

div.shrinked-container {
    left: 50%;
}

div.scaledobject {
    display: flex;
    width: 500px;
    height: 300px;
    background: blue;
}

div.shrinked-container div.scaledobject {
    transform: scale(0.5,0.5);
}