JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="show-card">Dharmavir</a>
<div id="user-card" style="display:none">
    <p>
        Welcome Dharmavir,<br />        
        ABC Software, Inc
    </p>
    <a href="#">Logout</a>
<div>

CSS

#box { display: none; background: #aaa; border: 1px solid #666; width: 150px; height: 75px; }

JavaScript

$(document).ready(function(){
    // To show user-box
    $("#show-card").mouseup(function(){
        $("#user-card").show();

        // To hide user-box
        $(document).mousedown(function(){
            $("#user-card").hide();
            $(this).unbind("mousedown");
        })
    });
});