JSFiddle - React, Tailwind, and code Playground

by josangel555

HTML

<div class="popup">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error inventore molestiae, dignissimos ducimus adipisci sint suscipit dolor blanditiis fugit, quia aspernatur quos, facere nostrum! Distinctio praesentium saepe, quaerat modi fuga.</div>
<button class="click">click me</button>

CSS

.popup{
        position: absolute;
        width:400px;
        height: 300px;
        left: 50%;
        top: 50%;
        background: limegreen;
        border: 5px solid silver;
        transform: translate(-50%, -50%);
        transition: all 2s;
        opacity: 0;

    }
    .anim{
        animation: popAnim 2s forwards;
    }
    @keyframes popAnim{
        0%{
            transform : scale(1.5);
            opacity: 0;
        }
        100%{
            transform: scale(1);
            opacity: 1;
        }
    }

JavaScript

$(document).ready( function(){
        $(".click").on("click", function(){
            $(".popup").toggleClass("anim")
        })
});