JSFiddle - React, Tailwind, and code Playground

HTML

<a class="option" href="#">Your Account</a>
<div id="dialog">
    <div id="dialogPage" class="dialogPage">
           <p>Edit your account here</p>
    </div>
</div>

CSS

body {
    color: #4A4A4A;
    background-color: #F7F7F7;
    font-family: 'arial', sans-serif; 
    font-size: 0.95em;
    line-height: 150%;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    -webkit-overflow-scrolling: touch;  
    overflow-y: auto;
    overflow-x: hidden;
}

#dialog {
    display: none;
    background-color: rgba(25,30,37,0.95);
    width: 100%;
    position: fixed; 
    bottom:0; top: 0; left: 0; right: 0;    
    margin-top: 70px;
    z-index: 900;
    overflow-y: auto;
    overflow-x: hidden; 
}

    .dialogPage {
        background-color: #F7F7F7;
        border: 2px solid #ffffff;

        width: 900px; min-width: 900px; 
        padding: 20px;
        margin: 50px auto;  

        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;

        -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
        -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
        box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
    }


.noScroll {
    overflow-y: hidden;
    overflow-x: hidden; 
}

JavaScript

$('.option').click(function(e) {
    e.preventDefault();
    $('#dialog').show();
    $('body').addClass('noScroll');
    $(this).addClass('active');
    return false;
});

$('#dialog').click(function(e) {
    $(this).hide();
    $('body').removeClass('noScroll');
    $('.option').removeClass('active');
});

$('#dialogPage').click(function(e) {
    e.stopPropagation();
});