JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="inner">
        <h2>Flickering!</h2>
        <div class="anim">Click me</div>
    </div>
</div>
<div class="overlay"></div>

CSS

.outer{
    background: #a7aaad;
    width: 500px;
    height: 499px;
    position: relative;
}
.anim{
    width: 100px;
    height: 50px;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transform: scale(1);
    background: white;
    margin: 100px 0 0 100px;
}
.anim.bigger{
    transform: scale(2);
}
.overlay{
    opacity: 0.7;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.inner{
    position: absolute;
    background: #e5e5e5;
   -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 303px;
    height: 305px;
    z-index: 100;
}

JavaScript

$(document).ready(function(){
    $(".anim").click(function(){
        $(this).toggleClass("bigger");
    });
});