JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-wrapper">
    
    Here you have data
    
    <span class="logout">LOGOUT</span>
    
    <div class="popup">You have successfully logout</div>
    <div class="overlay"></div>
    
</div>

CSS

.main-wrapper {
    background: green;
    padding: 100px;
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0.7;
    z-index: 5000;
    display: none;
}

.popup {
    background: red;
    padding: 5px;
    z-index: 6000;
    position: absolute;
    display: none;
}

JavaScript

$(function () {
    $('.logout').on('click', function () {
        $('.overlay').css('display', 'block');
        $('.popup').css('display', 'block');
    });
});