JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form">
    <form action="" metod="post">
        
    </form>
</div>
<div class="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mollis ante in velit dignissim, id pretium nibh volutpat. Donec congue augue malesuada nulla viverra, id fringilla ligula dictum. Mauris et lacus vel dolor scelerisque efficitur non dictum metus. Morbi lectus lorem, placerat quis malesuada eget, molestie tempor metus. Pellentesque tincidunt quis sem non pulvinar. Pellentesque vitae vestibulum justo, vel imperdiet est. Sed libero ante, blandit id sem id, interdum accumsan felis. Curabitur et nunc vulputate, dictum massa ac, mattis orci. Pellentesque vehicula felis quis porttitor sodales. Integer molestie, dui id maximus laoreet, augue massa congue mi, nec ullamcorper lectus lacus nec leo. Nullam eu eros quis diam mattis accumsan vel at leo. Vivamus luctus, magna in dictum bibendum, turpis diam hendrerit sapien, ac iaculis urna ipsum commodo enim. Suspendisse efficitur ultricies ullamcorper. Nulla nec tincidunt elit, a elementum odio. Cras eget leo vel mauris placerat commodo vel et magna.</p>

    <p>Vestibulum at magna tortor. Proin fringilla vulputate nulla, sed lacinia leo bibendum ac. Maecenas facilisis eu augue ac pellentesque. Nunc sollicitudin enim massa, a volutpat dolor iaculis in. Fusce eget nunc dignissim dolor commodo vulputate non eu magna. Aliquam non placerat eros. Quisque volutpat massa eu nisi commodo ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam ullamcorper porttitor tellus et eleifend. Nulla facilisi. Phasellus condimentum, dolor ut volutpat posuere, tellus diam eleifend purus, ullamcorper porttitor magna arcu at lacus. Mauris euismod, erat non congue sollicitudin, ligula lectus aliquam tortor, ut consequat libero quam in felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin porttitor ex, ut ultrices mi commodo eu. Mauris tincidunt neque...

CSS

body{
    overflow:hidden;
    margin:0;
    padding:0;
}
.form{
    position:fixed;
    width:300px;
    height:100%;
    left:0;
    top:0;
    background: orange;
}
.form form{
    height:250px;
    width:220px;
    background:#fff;
    transform: scale(0.7) translate(-50%,-50%);
    transition: all 0.6s;
    position: absolute;
    opacity:0;
    left:50%;
    top:50%;
}
.form.act form{
    transform: scale(1) translate(-50%,-50%);
    opacity:1;
}
.right{
    transition: all 0.3s;
    position:absolute;
    left:0;
    z-index:1;
    background: #fff;
    min-height:100%;
    width:100%;
    padding:45px;
    box-sizing:border-box;
}
.overlay{
    z-index:-1;
    opacity:0;
    background: rgba(0,0,0,0.3);
    transition: all 0.3s;
    position: absolute;
    height:100%;
    width:100%;
    left:0;
    top:0;
}
.toggle{
    position: absolute;
    left:0;
    top: 50%;
    background: #3a9691;
    height:30px;
    width:30px;
    margin-top:-15px;
    z-index:2;
}
.toggle:hover{
        background: #61ABA7;
}
.right.act{
    left:300px;
}
.right.act .overlay{
    z-index:1;
    opacity:1;
}

JavaScript

$('.toggle').click(function(){
    $('.right, .form').toggleClass('act');
    return false;
});
$('.overlay').click(function(){
    $('.right, .form').removeClass('act');
    return false;
});