JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contact_form">
    <button class="trigger">Toggle popup</button>
    
    <div class="form_container">
    </div>

</div>

CSS

body {
    height: 2100px;
    margin:0;
}
body.popup-visible {
    position   : fixed;
    width: 100%;
    height: 100%;
}

.contact_form{
    width      : 100%; 
    height     : 80%;
    background : rgba(0, 0, 0, 0.7);;
    position   : absolute;
    top        : 0;
    left       : 0;
}

.contact_form .form_container{
    background-image: url('images/popup-post-it_2.png');
    background-size: 100%;
    background-repeat: no-repeat;
    display: none;
    width: 33.4em;
    z-index: 1001;
    position: fixed;
    top: 22%;
    left: 34%;
    padding-left: 10px;
    margin: auto;
    height: 33em;
    border: 2px solid red;
}

JavaScript

$('.trigger').click(function() {
    $('.form_container').toggle();
    $('body').toggleClass('popup-visible');
});