JSFiddle - React, Tailwind, and code Playground

HTML

<a class="navigate" href="account-link">Account</a>
<a class="navigate" href="login-link">Log In</a>
<a class="navigate" href="signup-link">Sign Up</a>
<a class="prevent" href="#">View Cart</a>
<div class="jacket">
    <div class="loading">Loading...</div>
</div>

CSS

.jacket {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: table;
}

.loading {
    display: table-cell;
    vertical-align: middle;
    font-size: 1.5em;
    color: #FFF;
    text-align: center;
}

JavaScript

$(function() {
    $('.jacket').hide();
    
    $('a').click(function() {
        $('.jacket').show();
    });
    
    $('.prevent').click(function(event) {
        event.preventDefault();
        $('.jacket').hide();
    });
});