JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <p id = "clickHere"><br /><br />Right-click here to see a custom context menu.</p>
        <div class='custom-menu'>
            <button name = "search">
                Search for an action to perform:
                    
            </button>
            <input type = "text" id = "textInput">
                
            </input>
        </div>
    </body>
</html>

CSS

.custom-menu {
    z-index:1000;
    position: absolute;
    background-color:#C0C0C0;
    border: 1px solid black;
    padding: 2px;
}

JavaScript

$(document).ready(function(){
    $(".custom-menu").hide();
});

$("#clickHere").bind("contextmenu", function(event) {
    event.preventDefault();
    $("div.custom-menu").show();
    $(".custom-menu").appendTo("body").css({
        top: event.pageY + "px",
        left: event.pageX + "px"
    });
})
    
    $(document).bind("click", function(event) {
    if (!$(event.target).is(".custom-menu, .custom-menu *")) {
        $("div.custom-menu").hide();
    }
});